画像に代替テキストが付与されている
概要
この基準では、画像を含むすべての非テキストコンテンツに代替テキストを提供することを確認してください。代替テキストを設定すると、画像を見ない・見られない状況のユーザーにも画像の内容を伝えられます。
メリット
- 視覚障害のあるユーザー: スクリーンリーダーが代替テキストを読み上げることで、画像の内容や機能をユーザーに伝えることができます。
- 帯域幅が限られているユーザー: 画像が表示されない環境では、画像の代わりに代替テキストがコンテンツの情報として提示されます。
代替テキストが不要な場合
本文コンテンツに影響を与えない装飾目的の画像などは、代替テキストが不要です。 詳しくは 装飾目的の画像が無視できるようになっているを確認してください。
達成方法
altの使用:<img>要素のalt属性に、画像の内容や機能を簡潔に説明するテキストを設定します。aria-labelの使用:aria-label属性を使用して、代替テキストを提供します。aria-labelledbyの使用:aria-labelledby属性を使用して、その要素を説明する他の要素のIDを参照します。複数の要素が1つの画像を説明する場合や、視覚的には隣接していないラベルを紐づけるときに有効です。Visually Hiddenテキストの使用: 視覚的には非表示だが、スクリーンリーダーには読み上げられるテキストを提供します。SmartHR UIのIconの代替テキストやVisuallyHiddenTextで提供するテキストは、これに該当します。
テスト方法
次のどれかの方法で、対象となるUIに代替テキストが付与されていることを確認します。
- 代替テキストの確認:
<img>要素のalt属性を確認し、画像の内容や目的を適切に表しているかを評価します。
- DevToolsでの確認:
- DevToolsのAccessibility > Comuted PropertiesでNameを確認します。 (参考: ユーザー補助機能のリファレンス | DevTools | Chrome for Developers)