Webサイトを実装していると、画像やアイコンに対してアクセシビリティ対応が必要になります。しかし、alt属性、aria-label、視覚的な非表示対応（以下、sr-only）など、複数の選択肢があり、どれを使うべきか迷うことはありませんか？
この記事では、それぞれの使い分けと判断基準について整理します。
判断フローチャート
Ionic の Accessibility Documentで「An alt Decision Tree」というフローチャート図が紹介されており、実装時の判断基準がとてもわかりやすく整理されていました。
それを参考に、判断フローチャートをAIを使って作成してみました。
フローチャートの解説
alt属性の場合
<img src="profile.jpg" alt="田中太郎のプロフィール写真">
HTML標準の方法。装飾的な画像はalt=""で読み上げをスキップ。
aria-label（ボタン、リンクなど）の場合
<button aria-label="メニューを開く">
<svg aria-hidden="true">...</svg>
</button>
altが使えない要素に使用。シンプルな説明に適している。
sr-onlyの場合
<button>
<svg aria-hidden="true">...</svg>
<span class="sr-only">メニューを開く</span>
</button>
複雑な説明や翻訳対応が必要な場合に使用。
SVG画像の細かい取扱い方
SVG画像は実装方法によって、アクセシビリティ対応が異なります。また、アイコンと複雑な図表では適切なアプローチが変わります。
<img>タグの場合
<!-- アイコンのみのリンク -->
<a href="https://instagram.com/username">
<img src="/icons/instagram.svg" alt="Instagramで見る">
</a>
<!-- テキストと一緒に表示：altは空 -->
<a href="https://instagram.com/username">
<img src="/icons/instagram.svg" alt="">
Instagramで見る
</a>
ポイント：
- アイコンのみの場合は
altに説明を記述 - テキストがある場合は
alt=""で装飾扱い
<svg>タグの場合
アイコン・シンプルな図形
<a href="https://instagram.com/username" aria-label="Instagramで見る">
<svg aria-hidden="true" width="24" height="24">
<path d="..." />
</svg>
</a>
複雑な図表・グラフ
<svg role="img" aria-labelledby="chart-title chart-desc">
<title id="chart-title">2024年売上推移グラフ</title>
<desc id="chart-desc">
1月から12月までの月次売上を示す棒グラフ。
1月は500万円から始まり、12月には800万円まで増加している。
</desc>
<!-- グラフの複雑なパス -->
</svg>
ポイント：
- アイコン: 親要素に
aria-labelか<title>タグのみに留める - 複雑な図・グラフ:
<title>タグ +<desc>タグ +aria-labelledbyで詳細な説明を提供 -
<title>タグは短い説明、<desc>タグは詳細な説明
まとめ
-
<img>タグには必ずalt属性（装飾的な画像の場合は空でもOK）を入れる - 装飾的な要素には
aria-hidden="true"で対応 - SVGアイコンは親要素に
aria-labelまたはSVGに<title>のみに留める - 複雑な図表・グラフは
<title>+<desc>で詳細な説明をする - 迷ったら情報の伝達を優先する
- background-imageは重要な情報にはなるべく使用しない
アクセシビリティは「全てのユーザーに情報を届ける」ことが目的です。この記事が、適切な実装方法を選択する助けになれば幸いです。
参考記事
Discussion