altはどのくらいの長さで書けばいい？

1〜2文が目安です。それ以上の説明が必要な画像（グラフや図解など）は、要点だけaltに書き、くわしい説明は本文に置きます。

「〜の画像」「〜の写真」までaltに書くべき？

「画像」は不要です。読み上げソフトがimgタグの時点で「画像」と伝えるので、二重になります。「写真」「イラスト」の区別が意味を持つときだけ添えます。

その画像を消したとき、伝わる情報が減るかで判断します。減るなら説明を書き、減らないなら飾りとしてalt=""にします。

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

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

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

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

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

altに「正解の1文」があるわけではありません。その場面で画像が果たしている役割を書きます。同じしまちゃんの写真でも——

自己紹介では「どんな見た目か」が、解説記事では「何をしている場面か」が、その画像の仕事だからです。「この画像は本文の中で何を伝える係か？」と考えると、書くべきことが自然に決まります。

グラフ・図・スクリーンショットのような情報のつまった画像は、見た目ではなく読み取ってほしい結論を書きます。

<img src="graph.png" alt="しまちゃんのおやつ調べ。1位はひまわりの種で、全体の半分をしめる" />

alt="棒グラフ"では、目の見える人だけがグラフの中身を受け取れることになってしまいます。細かい数値まで全部は書けなくてOK。そのグラフを載せた理由（いちばん伝えたいこと）を1〜2文で書き、くわしい数字が大事なら本文や表でも示します。

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

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

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

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

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

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