代替テキスト（Alt Text）
代替テキスト（Alt Text、alternative text）とは、HTMLの<img>タグのalt属性に記述する説明的な文字列です。画像をレンダリングできない、または視覚的に認識できない場合に、画像の代わりに表示されます。
代替テキスト（Alt Text、alternative text）とは、HTMLの<img>タグのalt属性に記述する説明的な文字列です。画像をレンダリングできない、または視覚的に認識できない場合に、画像の代わりに表示されます。
なぜ重要なのか
代替テキストは、アクセシビリティとSEOの双方で重要な役割を果たします。
第一に、スクリーンリーダーはalt属性の値を読み上げ、視覚に障害のあるユーザーが画像の内容を理解できるようにします。WCAG（Web Content Accessibility Guidelines）のレベルA基準では、すべての非テキストコンテンツに代替テキストを求めています。
第二に、検索エンジンのクローラーは画像を直接「見る」ことができないため、画像の主題を理解するためにalt属性に頼ります。Googleは、代替テキストが画像検索のランキングシグナルであることを公式に認めています。よく書かれた代替テキストを持つ画像は、Google画像検索やGoogle Lensのようなビジュアル検索ツールに表示されやすくなります。
第三に、ChatGPTやPerplexityのような生成AIシステムも、画像を分析する際に代替テキストを重要な情報源として利用するため、GEO（Generative Engine Optimization）の観点からもますます重要になっています。
記述のガイドライン
- 具体的に書く。「この画像を見られなかった場合、ユーザーはどんな情報を見逃すか？」という問いに基づいて記述します。
- 125文字以内に収める。ほとんどのスクリーンリーダーは、およそ125文字を超える代替テキストを切り捨てます。
- 関連するキーワードを自然に含める。ページコンテンツの文脈に合うキーワードを1〜2個、自然に織り込みます。
- 「〜の画像」「〜の写真」「〜の絵」といった前置きを省く。スクリーンリーダーはすでにその要素を
<img>として読み上げるため、これは冗長です。 - 装飾的な画像には空のalt（
alt=""）を使う。コンテンツ上の目的を持たない装飾的な画像に説明を加えると、スクリーンリーダーのユーザーにとって不要なノイズになります。
良い例と悪い例
| 種類 | 代替テキスト | 理由 |
|---|---|---|
| 良い | 白い皿に乗った手作りのヴィーガンチョコレートケーキ | 具体的かつ簡潔で、画像の本質的な情報を伝えている |
| 良い | 2025年の月間オーガニックトラフィックの推移を示す折れ線グラフ | グラフの種類とデータの主題を明確に説明している |
| 悪い | ケーキ | 漠然としすぎており、どんなケーキか分からない |
| 悪い | ケーキ 写真 画像 デザート おいしい ケーキ チョコレートケーキ 手作りケーキ ヴィーガンケーキ | キーワードの詰め込み。スパムとして扱われる可能性がある |
| 悪い | IMG_20250301_142055.jpg | 生のファイル名であり、ユーザーにも検索エンジンにも意味をなさない |
よくある間違い
- キーワードの詰め込み: 代替テキストにキーワードを繰り返し並べると、Googleにスパムと分類される可能性があり、ユーザー体験も著しく損ないます。キーワードは文脈の中に自然に含めるべきです。
- すべての画像に同じ代替テキストを使う: ページ上の複数の画像に同じ説明をコピー＆ペーストすると、検索エンジンがそれらを重複コンテンツとして扱う可能性があります。各画像には、その固有の内容を反映した独自の説明を付けるべきです。
- 代替テキストを完全に省く: alt属性そのものが欠けていると、スクリーンリーダーはファイル名を読み上げ、アクセシビリティを大きく低下させます。装飾的な画像であっても、空のalt属性（
alt=""）を含める必要があります。 - AI生成の代替テキストを確認せずに使う: AIツールが提案する代替テキストは、文脈を完全には反映していない場合があります。人による確認と、ページコンテンツに合わせた最適化が常に必要です。
- 本文をそのままコピーする: 画像のそばにあるキャプションや本文と同じ内容を代替テキストに入れると、スクリーンリーダーのユーザーは同じ内容を二度聞くことになります。代替テキストは、周囲のテキストを補完すべきであり、重複させるべきではありません。
Sources:
関連するinblogの投稿
inblogが役立つ点
inblogのエディタは、画像を挿入する際に代替テキストの入力欄を表示し、空のままにすると警告を出します。