画像のalt属性を正しく扱う
今まで何となくの認識で扱っていた画像のalt属性について理解し直す機会があったので、備忘録としてまとめました。
alt属性の基本
ページやコンテンツの内容に沿ったテキストをalt属性の値として設定します。
<img src="images/guiter.jpg" alt="アンプの上に乗ったギターの写真">
alt属性を正しく扱うべき理由
アクセシビリティ
パソコンを利用しようとなった際に視覚障がい（大きく「盲（blindness）」と「弱視 (low vision)」に分けられる）を持ったユーザーは支援技術であるスクリーンリーダーを使用します。
スクリーンリーダーはHTMLのalt属性の値を読み上げるため、画像の内容がわかるように正確に設定をする必要があります。
コンテンツとしての汎用化
テキスト情報として抽出できるようになるため、テキスト検索や音声化など、コンテンツを様々な方法で再利用できるようになります。
SEO
SEOに直接的な効果はありませんが、検索エンジンのクローラーに画像の内容を伝えることができるようになるため、画像検索での上位表示を狙えたり、間接的に良い影響を与えることができます。
一時的なトラブル
ネットワークのトラブルなどで画像が表示されない場合でも、設定しているalt属性の値が代替テキストとして表示されるようになるため、ユーザーは「どんな画像があったのか」をイメージをすることができます。
押さえておきたいポイント
alt属性は設定した上で値を空にすべきケースがある
alt属性の値を空に指定した場合、スクリーンリーダーでは読み上げがスキップされます。
以下のケースではalt属性の値を空にします。
コンテンツや文章の雰囲気・イメージを演出するためだけの装飾的な画像
すでにテキストでも画像の情報を伝えており、さらにaltでの説明が入ると冗長になる画像
（例）【人物画像＋人物名】などの組み合わせの場合に、何度も同じページ内で「山田太郎」という名前が繰り返されている場合にはあえて空にするという配慮方法もありますが、alt=”〇〇の写真”とするとそこにその人物の写真が存在しているという情報をユーザーに伝えることができます。
<img src="images/photo.jpg" alt="ギタリスト 山田太郎の写真">
文字は可能な限り画像化せずテキストにする
文字を画像化してしまうと、拡大機能を使用した際に画像文字を拡大できずぼやけてしまったり、画面のハイコントラスト設定をしている場合に、変換されなくなってしまうケースがあります。
デザイン的な理由であればなるべくWebフォントを利用しましょう。
やむを得ず画像化する場合
適切な内容をaltとして設定した上で、文字と画像（背景）のコントラストに気をつける必要があります。
| 太字でないテキストが18ポイント（日本語は22ポイント）未満、太字のテキストが14ポイント（日本語は18ポイント）未満の場合 | 太字でないテキストが18ポイント（日本語は22ポイント）以上、太字のテキストが14ポイント（日本語は18ポイント）以上の場合 |
|---|---|
| 文字とその背景の間に、4.5:1 以上のコントラスト比が必要 | 文字とその背景の間に、3:1 以上のコントラスト比が必要 |
An alt Decision Tree (alt属性決定木)
代替テキストの書き方に迷ったらこれで確認していくと良いみたいです。
英文だとちょっと読みづらい・・・という方は上記のAn alt Decision Treeを翻訳した記事を書いてくださっている方もいるのでこちらを参考にすると良さそうです。
最後に
現在、フロントエンドの技術としてWebアクセシビリティがかなり注目されてきています。
今回の記事では画像のalt属性の話にフォーカスしましたが、他にもたくさんWebアクセシビリティの技術は存在しますし、かなり奥が深い分野だと感じています。
技術者として、より多くのユーザーが様々な環境下でも縛られることなくWebサービスの利用ができる世界に少しでも貢献できたらいいなという気持ちで、今後も引き続きWebアクセシビリティについて学んでいきたいと思います。
参考
Discussion