alt 属性（画像の代替テキスト）の正しい書き方
alt 属性は、画像が表示できない・見えないときに、その画像の代わりに読まれるテキストです。目の見えない利用者のスクリーンリーダーが読み上げ、画像の読み込みに失敗したときに表示され、Google 画像検索にも使われます。ポイントは 2 つだけ。意味のある画像には内容を、飾りの画像には空の alt を付けることです。
alt 属性とは何ですか？
alt 属性は img タグに書く「画像の代替テキスト」で、画像が見えないときに代わりに使われます。スクリーンリーダーはこれを読み上げ、画像が読み込めなかったときはこの文字が表示され、検索エンジンは画像の内容理解に使います。見える人には普段見えませんが、見えない状況では画像そのものの役割を担います。
画面が見える人にとって、alt は普段まったく目に入りません。だからこそ後回しにされがちですが、見えない状況では画像そのものの代わりになります。使われる場面は主に 3 つです。
- スクリーンリーダー — 目の見えない利用者が画像に差しかかったとき、alt が読み上げられる
- 読み込み失敗 — 回線が悪い・画像が消えているとき、alt の文字が代わりに表示される
- 画像検索エンジン — Google 画像検索が「この画像は何か」を判断する手がかりにする
装飾だけの画像にも alt は必要ですか？
必要ですが、値は空（alt=""）にします。区切り線や背景の飾りなど、内容に意味を持たない画像に説明を付けると、スクリーンリーダーが無意味な読み上げをして邪魔になります。alt を「書かない」のではなく「空で明示」するのが正解です。空 alt により支援技術はその画像を安全に読み飛ばせます。
ここが最も誤解されている点です。「alt を書かない」と「alt を空にする」は、支援技術にとってまったく違う意味になります。
| 書き方 | 意味 | スクリーンリーダーの挙動 |
|---|---|---|
alt="説明" | 意味のある画像 | 説明を読み上げる |
alt="" | 装飾で、中身に意味は無い | 読み飛ばす（正しい） |
| 属性ごと無い | 状態が不明 | ファイル名や URL を読み上げてしまう（NG） |
<!-- 意味のある画像: 役割を書く -->
<img src="/products/x100.jpg" alt="コンパクトカメラ X100（前面・シルバー）">
<!-- 装飾画像: 空 alt で「読み飛ばしてよい」と明示 -->
<img src="/decoration/divider.svg" alt="">
<!-- ★ alt 属性ごと無い（NG）。スクリーンリーダーがファイル名を読み上げる -->
<img src="/products/x100.jpg">意味のある画像には何を書けばいいですか？
その画像が「その場所で果たしている役割」を、簡潔な文で書きます。写真の見たままではなく、なぜそこに置いたかを言葉にするのがコツです。たとえば製品写真なら製品名と型番、グラフなら読み取ってほしい結論、ロゴなら会社名です。前後の本文と重複する説明は不要で、20〜125 文字程度に収めると読み上げが自然になります。
コツは「見たまま」ではなく「その画像がそこにある理由」を書くことです。同じ人物写真でも、 社員紹介ページなら alt="代表取締役 山田太郎"、料理教室の記事なら alt="包丁で玉ねぎをみじん切りにしている手元" と、文脈によって適切な alt は変わります。前後の本文で既に説明していることは繰り返さず、画像でしか分からない情報を補います。
/* そもそも本文に関係ない飾りは、img ではなく CSS 背景にする手もある。
背景画像は代替テキストの対象外なので、装飾は最初から DOM に出さない設計が綺麗 */
.hero {
background-image: url("/decoration/pattern.svg");
}よくある失敗は何ですか？
「画像」「写真」「img_1234.jpg」のように中身を説明していない alt、本文と全く同じ文の繰り返し、そして SEO 目的のキーワード詰め込みが三大失敗です。特にキーワードの羅列は、スクリーンリーダー利用者には意味不明な読み上げになり、検索エンジンにもスパムと見なされます。alt はまず利用者のために書きます。
- 「画像」「写真」だけ — 何も説明していない。読み上げても「画像」としか分からない
- ファイル名のまま（
DSC_0421.jpg）— 意味を成さない。CMS が自動で入れることがあるので要注意 - 「〜の画像」「〜の写真」 — 冗長。スクリーンリーダーは img を画像だと既にアナウンスするので、二重になる
- キーワード詰め込み —
alt="SEO 対策 東京 格安 ホームページ制作"のような羅列。利用者に無意味で、検索エンジンにもスパム扱いされる
リンクやボタンになっている画像の alt はどう書きますか？
画像そのものではなく「押すと何が起きるか」を書きます。リンク先やボタンの機能が alt になるべきで、たとえば会社ロゴがトップページへのリンクなら alt="ホーム" が適切です。alt が空だと、スクリーンリーダーはリンクの URL をそのまま読み上げてしまい、行き先が分かりません。
<!-- ロゴがトップへのリンク: 「画像の説明」ではなく「行き先」を書く -->
<a href="/">
<img src="/logo.svg" alt="ホーム">
</a>
<!-- アイコンだけのボタン: 操作を書く。空 alt にすると用途不明になる -->
<button>
<img src="/icons/search.svg" alt="検索">
</button>画像がリンクやボタンを兼ねているとき、alt を空にするとそのリンクは「行き先の分からないリンク」になってしまいます。 スクリーンリーダーは仕方なく URL を読み上げますが、/p/12345 と読まれても利用者には何のことか分かりません。 この場合の alt は画像の見た目ではなく、クリックした結果を書きます。
グラフや図など、一言で説明できない画像はどうしますか？
alt には結論を短く書き、詳細は本文か表で近くに置きます。棒グラフなら alt="2020〜2024 年の売上推移。2023 年に前年比 1.5 倍へ増加" のように読み取ってほしい要点を書き、正確な数値は本文の表に載せます。画像だけに情報を閉じ込めないことが、見えない人にも検索エンジンにも親切です。
グラフ・図解・地図・スクリーンショットのように情報量の多い画像は、短い alt に収まりきりません。 無理に長文の alt を書くより、結論を alt に、詳細を本文や表に分けるのが定石です。
- グラフ — alt に「読み取ってほしい結論」、本文の 表に正確な数値
- フローチャート — alt に概要、直後に手順を
<ol>で本文化する - スクリーンショット — alt に「どの画面か」、操作の要点は本文で言葉にする
この「画像だけに情報を閉じ込めない」姿勢は、AI クローラーにも効きます。AI の多くは画像の中身を読みません。本文に要点があれば、見えない人にも AI にも同じ情報が届きます。
alt は SEO に効きますか？
効きますが、限定的です。Google は画像検索で alt を画像内容の手がかりに使うため、正確な alt は画像検索からの流入に有利です。一方で本文ランキングへの寄与は小さく、キーワードを詰めても順位は上がりません。SEO のためではなく、まず利用者のために正確に書くと、結果的に画像検索にも効くという順序です。
Google 自身が、alt は「画像の内容を伝えるために書く。検索のためにキーワードを詰めない」と明言しています。 画像検索からの流入が見込めるサイト（EC・レシピ・不動産・観光など）では、正確な alt が実利になります。 逆に、alt を SEO の裏技のように使う発想は、利用者にも検索にも逆効果です。
自分のサイトの alt をどう確認すればいいですか？
ブラウザの検証ツールで img を検索し、alt 属性の有無と中身を目視します。数が多いなら、alt が欠けている画像を機械的に洗い出すのが確実です。本ツールのアクセシビリティ診断でも、alt の無い画像の枚数を検出します。ただし「alt が空か埋まっているか」は機械判定できても、「中身が適切か」は人が読んで判断する必要があります。
機械でできるのは「alt が有るか無いか」までです。中身が適切かは、最終的に人が読んで判断します。 まずは alt の欠けている画像をゼロにし、次に「画像」「写真」「ファイル名」のような無意味な alt を潰す、という順で進めると効率的です。 関連して、フォーム部品のラベルづけは フォームのラベルを正しく関連づける を参照してください。