alt 属性は「画像が見えない人のための“言葉の代わり”」
まず一番大事な本質からいきます。
alt 属性は、
「この画像は何なのか？」を“言葉で説明するための場所” です。
画像がちゃんと表示されているときは、
ユーザーは alt を意識しません。
でも、
画像が読み込めなかったとき
視覚障害のある人がスクリーンリーダーでページを読んでいるとき
検索エンジンがページの内容を理解しようとしているとき
こういう場面では、alt に書かれたテキストが「画像の代わり」になります。
だから alt は、
「見えない人に、この画像をどう説明するか？」
という視点で書くのが本質です。
alt 属性の基本形と img タグとのセット
img タグと alt のセットは“ワンペア”で覚える
最小の例はこれです。
<img src="cat.jpg" alt="椅子の上で丸くなって寝ている白い白猫">
ここでやっていることは、
src で「どの画像ファイルか」を指定alt で「その画像が何を写しているか」を説明
という役割分担です。
<img> を書くときは、
「src と alt はセット」
と指に覚えさせてしまっていいレベルです。
alt に「何を書くべきか」を具体的にイメージする
「この画像は何を伝えたい？」から逆算する
alt を書くとき、
まず自分にこう問いかけてください。
「この画像は、ユーザーに何を伝えるために置いている？」
「この画像が見えない人に、何を言葉で伝えるべき？」
例えば、商品画像なら：
<img src="coffee-beans.jpg" alt="中深煎りのコーヒー豆 200g のパッケージ">
ここで伝えたいのは
「コーヒー豆の商品であること」と
「中深煎り・200g という情報」です。
人物写真なら：
<img src="author.jpg" alt="著者の山田太郎。黒縁メガネをかけた男性の顔写真">
ここで伝えたいのは
「誰の写真か」と
「プロフィールとしての雰囲気」です。
グラフなら：
<img src="sales-graph.png" alt="2023 年の売上推移。夏に大きく売上が伸びている折れ線グラフ">
ここで伝えたいのは
「何のグラフか」と
「どんな傾向があるか」です。
ポイントは、
「画像の中の全てを逐一説明する」のではなく
「この画像が伝えたい本質」を短く言葉にする ことです。
alt=””（空文字）にするケースも“ちゃんと意味がある”
装飾だけの画像は「説明しない方が親切」
すべての画像に
意味のある alt を付けるべきかというと、
実はそうではありません。
ただの飾り線
背景的な模様
意味を持たないアイコン
こういった「情報としての意味がない画像」は、
スクリーンリーダーに読み上げられても
ユーザーの負担になるだけです。
その場合は、あえてこうします。
<img src="line.png" alt="">
alt=""（空文字）は、
「この画像は意味のある情報ではないので、読み上げなくていいです」
というサインです。
つまり、
意味のある画像 → alt に説明を書く
意味のない装飾 → alt=”” にして黙らせる
という二択で考えると整理しやすいです。
alt と「画像の中の文字」の関係
画像の中に文字が書いてある場合どうするか
例えば、
「SALE! 今だけ 50% OFF」と書かれた画像バナーがあるとします。
このとき alt をどうするか。
悪い例：
<img src="sale.png" alt="画像">
これでは何も伝わりません。
より良い例：
<img src="sale.png" alt="セール開催中。今だけ 50% OFF">
ここでは、
画像の中の文字をそのままではなく、
「ユーザーに伝えたいメッセージ」として言い換えている のがポイントです。
ただし、
すぐ横に同じ内容のテキストがあるなら、
alt は空にしても構いません。
<img src="sale.png" alt="">
<p>セール開催中。今だけ 50% OFF</p>
この場合、
テキストとして同じ情報が提供されているので、
画像は「装飾」とみなせます。
JavaScript と alt：動的に画像を変えるときの注意
src を変えるなら alt も一緒に変える
ギャラリーやスライドショーなどで、
JavaScript から画像を切り替えることがあります。
HTML：
<img id="mainPhoto" src="photo1.jpg" alt="ギャラリーの写真 1">
<button id="nextBtn">次へ</button>
JavaScript：
const mainPhoto = document.querySelector("#mainPhoto");
const nextBtn = document.querySelector("#nextBtn");
const photos = [
{ src: "photo1.jpg", alt: "ギャラリーの写真 1" },
{ src: "photo2.jpg", alt: "ギャラリーの写真 2" },
{ src: "photo3.jpg", alt: "ギャラリーの写真 3" },
];
let index = 0;
nextBtn.addEventListener("click", () => {
index = (index + 1) % photos.length;
mainPhoto.src = photos[index].src;
mainPhoto.alt = photos[index].alt;
});
ここで大事なのは、src だけでなく alt も一緒に更新している ことです。
見た目の画像が変わるなら、
「その画像が何か」という説明も変えるべきだからです。
alt を放置すると、
視覚的には写真 3 なのに、
スクリーンリーダーは「写真 1」と読み上げ続ける、
というズレが起きてしまいます。
SEO とアクセシビリティの両面で効いてくる alt
検索エンジンにとっての alt
検索エンジンは、
画像の中身を完全に理解できるわけではありません。
そこで alt が
「この画像は何についてのものか」
を理解する手がかりになります。
例えば、商品一覧ページで
<img src="coffee-beans.jpg" alt="中深煎りコーヒー豆 200g">
と書いておくと、
「このページはコーヒー豆の商品を扱っている」
という情報が検索エンジンにも伝わりやすくなります。
アクセシビリティにとっての alt
スクリーンリーダーは、
画像に alt があればそれを読み上げます。
alt がないと、
ファイル名を読み上げたり、
「画像」とだけ言ってスキップしたりします。
どちらにせよ、
ユーザーにとっては不親切です。
「この画像が見えない人にも、同じ情報を届けたいか？」
という視点で alt を書くことが、
アクセシビリティの第一歩です。
よくある“やりがち alt ミス”と直し方
alt=”画像” や alt=”写真” で済ませてしまう
悪い例：
<img src="cat.jpg" alt="猫の画像">
これでもまだマシですが、
「どんな猫？」「何をしている？」が分かりません。
より良い例：
<img src="cat.jpg" alt="椅子の上で丸くなって寝ている白い猫">
ここまで書くと、
見えない人にも情景が伝わります。
alt を完全に省略する
悪い例：
<img src="cat.jpg">
これは、
「この画像が何なのか、誰にも伝えない」
という状態です。
意味のある画像なら、
必ず alt を書くべきです。
初心者として「alt 属性」で絶対に掴んでほしいこと
alt は、
「画像が見えない状況で、その画像を言葉で説明するための属性」 です。
意味のある画像 → alt に「何の画像か」を短く具体的に書く
意味のない装飾 → alt=”” にして読み上げ対象から外す
画像の中の文字は「伝えたいメッセージ」として言い換える
JavaScript で画像を切り替えるときは、alt も一緒に更新する
SEO にもアクセシビリティにも効く“超重要な一行”として扱う
あなたが <img> を書くときに、
「この alt を読んだだけで、画像を“頭の中に思い浮かべられる”か？」
と自分に問いかけられるようになったら、
もう alt を“おまけの属性”ではなく、
“情報そのもの”として扱えている状態です。