適合レベル
A
※各レベルについては適合レベルとはをご覧ください
概要
画像が伝えたい情報や役割を、画像が見えないお客様にも性格に伝わる代替テキストで説明する。
具体的な実装方法
1.1.1 A
1. ⭕️良い例
情報を含む画像
<img>要素のalt属性に、画像が伝えている情報や目的を簡潔に説明するテキストを指定します。<img src="shouhin.jpg" alt="A社製新型スマートフォンの正面写真">
機能を持つ画像（リンクやボタン）
- リンク先や実行される機能を
alt属性に記述します。
<a href="cart.html">
<img src="cart-icon.png" alt="ショッピングカート">
</a>2. ❌悪い例
alt属性がない、または不適切:
なぜ問題なのか
alt属性がないと、スクリーンリーダーがファイル名（例:IMG_1234.JPG）を読み上げてしまい、意味が伝わりません。「画像」「写真」のような冗長なテキストも避けるべきです。
改善策
- 画像が持つ情報や目的を、簡潔かつ正確に記述します。
情報を持つ画像なのにalt属性が空:
なぜ問題なのか
alt=""とすると、その画像は装飾目的であるとみなされ、スクリーンリーダーに無視されてしまいます。情報が利用者に伝わりません。
改善策
- 画像が何らかの情報を持つ場合は、必ずその内容を
alt属性に記述します。
3.プラットフォーム別の実装
<img>要素のalt属性が最も基本的な実装です。複雑な情報の場合は、aria-labelledbyやaria-describedbyで補足的な説明を関連付けることもできます。
4.特殊なケースへの対応
装飾目的の画像
- コンテンツに意味を持たない純粋な装飾画像の場合、
alt属性を空 (alt="") にします。これにより、支援技術はその画像を意図的に無視します。
グラフや図表
alt属性には「〇〇に関する棒グラフ」のような簡潔な説明を記述し、隣接するテキストや別ページへのリンクで、グラフが示す詳細なデータや傾向を説明（長い説明）します。
音声・動画のみのコンテンツ
- 発言内容などをすべて書き起こしたテキスト（トランスクリプト）へのリンクを提供します。
CAPTCHA
- 人間とコンピュータを区別するためのテストであるCAPTCHAは、画像や音声に代わる、別の形式のテストを提供する必要があります。
確認観点
1.1.1 A
1.定量的な基準の担保
自動チェックツールでの合格
Lighthouseやaxe DevToolsなどのツールは、alt属性の有無をチェックできます。これらのツールで問題を検出されないようにします。
チェックリストの達成度
2.定性的な基準の担保
レビュー
- コードレビューの際に、
alt属性の有無だけでなく、その内容が画像の意図を正確かつ簡潔に伝えているか、文脈に合っているかを確認します。ファイル名や冗長なテキストが使われていないかをチェックします。
専門家による監査
- アクセシビリティの専門家が、実際にスクリーンリーダーを使用してページを評価します。代替テキストが文脈に沿って自然に読み上げられ、利用者体験を損なっていないか、また、情報の過不足がないかを検証します。