画像のalt属性の書き方——良い例・悪い例と飾り画像の扱い

<img>のaltは、HTMLコースで「画像の説明を書く場所」と学びました。このレッスンでは一歩進んで、何をどう書けば”伝わる”のかを身につけます。altは、読み上げソフトの人・画像が読み込めなかった人・検索エンジンにとって、画像そのものの代役です。

良いalt・悪いalt

しまちゃんのページの写真で比べてみます。

<img src="shima.png" alt="しまちゃんの写真" />

alt	判定	理由
`alt="画像"`	❌	何の画像かまったく分からない
`alt="shima.png"`	❌	ファイル名は説明ではない
`alt="しまちゃんの写真"`	○	何かは分かる
`alt="ふわふわの白い鳥、しまちゃんが枝にとまっている写真"`	◎	見えなくても様子が浮かぶ

コツは「電話ごしに写真を説明するつもりで書く」。長さは1〜2文で十分です。

背景の模様や区切り線など、意味のない飾り画像もあります。そこに「模様の画像」などと書くと、読み上げの人にはノイズになるだけ。飾りはalt=""（空っぽ）にします。

<img src="border-flower.png" alt="" />

alt=""は「この画像は読み飛ばしてOK」という意図的な合図です。altごと書き忘れるのとは意味がちがうので、飾りでもalt=""は必ず書きます。

ロゴをクリックするとトップへ戻る——そんなリンク画像のaltは、見た目ではなく押したらどうなるかを書きます。

<a href="/">
  <img src="logo.png" alt="トップページへ戻る" />
</a>

読み上げの人は「リンク、トップページへ戻る」と聞けて、安心して押せます。alt="ロゴ"だと、押した先が分かりません。