画像のaltは何を書く？情報を伝える画像と飾りを目的から分けよう

HTMLの画像に付けるaltは、画像の内容を、必要な場面で文字として伝えるための属性だよ。ファイル名をとりあえず入れる前に、そのページで画像が何を伝えているかを考えてみよう。

このページでは、情報を伝える画像と、飾りの画像の違いを知り、altの書き方を選べるようになる。必要なのはブラウザだけ。下の作例は、画像を表示しない比較へ切り替えられるよ。

画像がなくても必要な情報は何？

例えば、集合場所を示す地図に「東口の時計台前」という情報があるなら、その案内が文字でも伝わる必要がある。一方、見出しの横に飾る星が、ほかの情報を追加していないなら、毎回「星」と読み上げる必要はない場合がある。

<img src="meeting.svg" alt="集合場所は東口の時計台前">
<img src="decoration.svg" alt="">

二つ目のalt=""は、属性の書き忘れとは違う。装飾として扱う意図を示す書き方だよ。画像がリンクやボタンの唯一の説明なら、その操作の目的を伝えるなど、別の判断も必要になる。

作例で画像なしの状態を見る

1. 最初は、集合場所の画像と、その代わりの説明を読む。
2. 「画像なしの比較」に切り替える。
3. 情報画像に対応する代替文だけで、どこへ集合するか分かるか確認する。
4. リセットで画像表示へ戻す。

この比較は、代替文を見直すための作例。画像を隠した表示を、すべてのスクリーンリーダーの動作そのものと考えないでね。作例には、実際に画像へ設定したaltの値も表示する。

長い説明を詰め込まない

グラフや複雑な地図では、一つのaltだけに全部を詰め込むより、本文の説明やデータ表などが必要になることがある。ページの目的に合う情報を、画像だけに閉じ込めないことが大切だよ。

W3C WAIの判断表は、装飾・情報・機能などに分けて考える助けになる。画像を外したら意味が伝わらない場所を、一つずつ見直してみよう。