非テキストコンテンツには代替テキストを提供する
視覚的な情報に依存できないユーザー(スクリーンリーダー利用者など)が、画像やアイコンなどの非テキストコンテンツの内容や目的を理解できるようにするためです。これにより、すべてのユーザーが同等の情報へアクセスできるようになります。
該当するケース
Section titled “該当するケース”- 画像(写真、イラスト、図表、グラフ、インフォグラフィックなど)
- アイコン(メニュー、ツールバー、通知、ステータスインジケーターなど)
- 装飾的な要素
- インタラクティブな要素(ボタン、リンク、フォームコントロールなど)
- メディアコンテンツ(動画サムネイル、プレーヤーコントロールなど)
- ドキュメント内の視覚要素(フローチャート、組織図、テクニカルイラストレーションなど)
関連するWCAG達成基準
Section titled “関連するWCAG達成基準”チェックリスト
Section titled “チェックリスト”- すべての非テキストコンテンツに適切な代替テキストが提供されていること
- 装飾的な要素には空の代替テキストが設定されていること
- アイコンやボタンには、その機能を説明する代替テキストが設定されていること
- 複雑な図表やグラフには、詳細な説明が提供されていること
- 非テキストコンテンツがインタラクティブな要素として使用されている場合、その目的が明確に説明されていること
- プラットフォーム固有のアクセシビリティ属性(alt属性、アクセシビリティラベル、アクセシビリティAPIなど)が適切に設定されていること
- 代替テキストは、コンテンツの内容を簡潔に説明する必要がありますが、その目的や文脈も考慮する必要があります
- 装飾的な要素と意味のある要素を区別する基準は、その要素が情報を伝えているかどうかです
- 複雑な図表やグラフの場合、代替テキストだけでなく、詳細な説明を別途提供することを検討してください
- アイコンの代替テキストは、そのアイコンの機能や目的を説明する必要があります
- プラットフォームごとのアクセシビリティガイドラインを参照し、適切な代替テキストの提供方法を確認してください
チェック方法
Section titled “チェック方法”- スクリーンリーダーを使用して、代替テキストが適切に読み上げられるか確認する
- 非テキストコンテンツを非表示にして、代替テキストが表示されるか確認する
- コードレビューで、適切な代替テキストが設定されているか確認する
- プラットフォーム固有のアクセシビリティツール(開発者ツール、インスペクター、APIテストツールなど)を使用して、代替テキストの設定を確認する
補足・注意点
Section titled “補足・注意点”- 代替テキストは「画像」や「アイコン」という言葉で始める必要はありません(スクリーンリーダーは既にその要素の種類を伝えます)
- 長すぎる代替テキストは避け、簡潔で分かりやすい説明を心がけてください
- インタラクティブな要素として使用されている場合、代替テキストはその要素の目的を説明する必要があります
- プラットフォームごとに適切な代替テキストの提供方法が異なるため、各プラットフォームのガイドラインを参照してください
- 自動生成された代替テキストは、人間が確認して適切性を検証する必要があります