アクセシビリティの基本【alt属性】

ウェブサイトに画像を掲載する際、alt属性 は単なるSEO対策ではなく、
目の見えない人や視力の弱い人が内容を理解するためにアクセシビリティとして非常に重要です。
ホームページは健常者、目の見えない人、視力の弱い人、高齢者の方が、誰でも簡単に情報を得ることが大きなメリットです。そうアクセシビリティを高めて「誰にでも優しいホームページ」にすることが大切なのです。
この記事では、alt属性の基本を紹介します。

1 アクセシビリティとは？

スクリーンリーダー対応、キーボード操作対応、色覚多様性に配慮したデザインなどで、障害の有無や年齢にかかわらず、すべての人が平等にウェブサイトやアプリを利用できるようにすることです。

2 alt属性とは？

画像が表示できない場合やスクリーンリーダー利用時に代替テキストを提供する属性です。例えば：

<img src="flower.jpg" alt="赤いチューリップが咲いている庭の写真" />
  

スクリーンリーダーを使っている人や、画像を読み込めない環境でも、
alt属性があれば画像の内容を把握できます。

3 alt属性を書くときのポイント

3.1 画像の内容を簡潔に伝える（50文字前後が目安）

たまに、猫や犬の写真に、alt="猫"とかalt="犬"と書いている人がいらっしゃいますが、これでは目の見えない人や視力の弱い人がスクリーンリーダーで読み上げた「代替テキスト」を聞いても「猫」、「犬」しか分からず、写真のイメージが浮かびません。

もし、あなたが目をつむり「この写真は犬と猫が写ってます」と言われたら、何が想像できますか？これでは写っている写真を想像できる人は皆無です。

ですので、alt属性を記載する時は、次のようにして下さい。

例：

<img src="dog-cat.png" alt="ソファーの上で2匹でくっついて前足を曲げながらへそ天で寝る犬と猫" />
  

これでしたら、なんとなくでも「あー、犬と猫が並んでソファーで昼寝しているんだ」、「前足を曲げながらへそ天で寝ているんだ。可愛いだろうな。」とイメージが湧きます。

3.2 装飾的な画像には空のalt（alt=""）を設定する

ブログなどで貼り付ける装飾的な意味のイメージ写真のalt属性は、逆に空白にして下さい。

ここで例えば、alt="イメージ写真"と書いても意味がありません。なぜなら装飾用のイメージ写真ですからスクリーンリーダで「イメージ写真」と聞いても意味がないからです。よって、装飾の写真の場合は空白にして下さい。

ただ、ロゴなど重要な情報はテキストでも補足します。

例：

<img src="decorative-line.png" alt="" /> 
<img src="logo.png" alt="ウェブサイト制作サービスのロゴ" />
  

4 まとめ

alt属性は、目の見えない人、視力の弱い人がスクリーンリーダーで読み上げるための「代替テキスト」で画像やイラストの内容を伝える為のものです。また、画像がリンク切れで表示されないときにも文字としてホームページ上に表示されます。
alt属性は、単なるSEO対策ではありません。アクセシビリティを高める大切な要素なのです。重要な画像は必ず手動で内容をわかりやすく記述することをおすすめします。