アイコン画像の代替テキストに「アイコン」や「ボタン」という言葉を含めるべきか
最終更新:2024年12月2日
タグ:マークアップ、スクリーン・リーダー
質問/問題
アイコン画像の説明として、代替テキストに「アイコン」や「ボタン」という言葉を含める必要はないのか。
回答/結論
代替テキストに「アイコン」や「ボタン」という言葉を含めるべきではない。
解説
適切なマークアップがされているアイコン画像を読み上げる際、スクリーン・リーダーはそれが画像であるという情報と共に代替テキストを読み上げますので、ユーザーはそれがアイコンであることを推測できます。ですから、代替テキストに「アイコン」という言葉を含める必要はありません。そもそも、それがアイコンであるかどうかを判断できなければ機能の利用や情報の取得に支障があるような状況は避けるべきです。
また、そのアイコンがボタンになっている場合は、それがボタンであるという情報も読み上げます。そのため、代替テキストに「ボタン」という言葉を含める必要もありません。もしボタンであることが分からないような読み上げになる場合は、マークアップに問題がある可能性が高いです。
参考:スクリーン・リーダーによる画像やボタンといった情報の追加は、読み上げ対象となっている要素のロール(役割)に基づいています。すべての要素にはデフォルトのロールがあります。またrole
属性を用いることで、要素のロールをデフォルトから変更することができます。適切な要素を用いて、必要に応じてrole
属性を活用することで、スクリーン・リーダーが適切に情報を追加できるようになります。
関連ガイドライン項目
画像:画像の説明の提供
関連チェック内容
- チェックID:0421
画像に関する簡潔で過不足ない説明が、設計資料で明示されている。かつ
短いテキストでは充分に説明できない場合には、詳細な説明のテキストが設計資料で明示されている。
- チェックID:0431
画像に関する簡潔で過不足ない説明が付加されている。かつ
詳細な説明が必要な場合には、その説明が当該の画像の直前または直後に表示されている、または関連付けられている。
- チェックID:0441
画像の説明がスクリーン・リーダーで適切に読み上げられる。