画像の代替テキストは、画像を見られないときにも、その画像が担う情報や機能を伝えるための文章です。
単に見た目を細かく描写するのではなく、そのページで画像が果たす役割に合わせて書き分けます。
情報を伝える画像には内容を示す文章を用意し、操作に使う画像には操作の目的を示し、意味を持たない装飾画像には空のalt属性を設定するのが基本です。
代替テキストとalt属性の役割
代替テキストとは、HTMLの<img>要素にあるalt属性へ指定するテキストです。
<img src="dog.jpg" alt="芝生の上に座る茶色の柴犬">
画像を読み込めない場合には代わりの情報になり、スクリーンリーダーなどの支援技術では、画像の情報や機能を音声または点字で受け取る手がかりになります。
同じ画像でも、掲載するページが変われば適切な代替テキストも変わります。
たとえば犬の写真は、犬種を紹介する記事では犬種や特徴を伝える必要がありますが、内容と関係のない飾りとして置かれているだけなら、説明を読み上げないほうが自然です。
画像の目的から書き方を決める
代替テキストを書く前に、画像がなくなった場合に読者が失う情報を考えます。
次の表で画像の役割を分けると、書く内容を判断しやすくなります。
| 画像の種類 | 代替テキストで伝える内容 | 実装の考え方 |
|---|---|---|
| 情報を伝える画像 | 本文の理解に必要な情報 | 要点を簡潔にaltへ書く |
| リンクやボタンの画像 | 移動先または実行する操作 | 見た目ではなく機能を書く |
| 装飾画像 | 伝える内容はない | alt=""にする |
| 本文と同じ内容を繰り返す画像 | 周囲の文章にない情報だけ | 完全な重複ならalt=""を検討する |
| グラフや図解などの複雑な画像 | 図の主題と結論 | 短いaltに加え、詳細を本文や表で示す |
情報を伝える画像
料理、人物、場所、製品などを説明する画像では、本文を理解するために必要な特徴を選びます。
<img src="pasta.jpg" alt="バジルを添えたトマトソースのスパゲッティ">
この例では、料理の種類と見分けるための特徴を伝えています。
皿の形や背景の色が本文の内容に関係しないなら、それらをすべて列挙する必要はありません。
リンクやボタンに使う画像
画像が操作部品になっている場合は、虫眼鏡の形ではなく「検索」のように操作の目的を示します。
<button type="submit">
<img src="search-icon.png" alt="検索">
</button>
ボタン内に「検索」という表示テキストが別にある場合は、同じ内容を重ねて読み上げないよう、アイコン側をalt=""にできます。
装飾画像と重複する画像
区切り線、背景の模様、意味を持たない飾りなどには、空のalt属性を設定します。
<img src="decorative-line.png" alt="">
alt属性を省略することと、alt=""を指定することは同じではありません。
空のaltは「この画像に読み上げる情報はない」と明示しますが、属性を省略すると、支援技術や利用環境によってはファイル名などが代わりに示されることがあります。
ただし、近くにキャプションがあるだけで機械的に空にするのは避けます。
キャプションと画像が同じ情報を伝え、画像から追加で受け取る内容がない場合に限って、重複を減らすために空のaltを使います。
文字を含む画像と複雑な図
画像内の文字が本文に存在せず、その文字自体が情報なら、代替テキストにも同じ内容を含めます。
一方、グラフやフローチャートの全情報を短いaltへ詰め込むと、かえって理解しにくくなります。
その場合は「月別売上の推移。詳細は直後の表に記載」のように図の主題と詳細の場所を示し、データや説明は本文または表で提供します。
伝わる代替テキストを書く3つの手順
- 画像の目的を決める
画像が情報、操作、装飾のどれを担うかを判断します。 - 周囲の文章と比べる
すでに書かれている説明を繰り返さず、画像からしか得られない情報を残します。 - 読み上げの流れで整える
画像の前後の文章と続けて聞いたときに、意味が通り、重複しない表現へ直します。
文字数だけで一律に良し悪しを決めることはできません。
短い写真説明で足りる場合もあれば、複雑な図のように本文で詳しい説明が必要な場合もあります。
まず必要な情報を過不足なく書き、長くなるなら詳細を本文へ移すと整理できます。
よくある失敗と直し方
ファイル名だけを入れる
<img src="dog.jpg" alt="img_001.jpg">
ファイル名では、画像が伝える内容を理解できません。
本文に必要な情報へ置き換えます。
「画像」や「写真」だけを書く
「商品画像」だけでは、どの商品なのか、何を確認できる画像なのかが分かりません。
ただし、写真であること自体が記事の判断材料になる場合は、「会場の混雑状況を写した写真」のように画像の種類を含めても構いません。
検索語を並べる
代替テキストは検索エンジンが画像とページの内容を理解する手がかりにもなりますが、SEOのために検索語を詰め込む欄ではありません。
同じ語を不自然に繰り返さず、その画像が読者へ伝える情報を自然な言葉で書きます。
画像の見た目をすべて説明する
色、配置、背景を細かく並べても、本文の理解に必要でなければ読み上げる情報が増えるだけです。
「画像を見た人が、このページで何を理解するか」を基準に情報を選びます。
公開前の確認方法
代替テキストは、入力しただけでは品質を判断できません。
次の順番で確認すると、実装漏れと内容のずれを見つけやすくなります。
- すべての
<img>要素に、内容のあるaltまたは意図した空のaltがあるかを確認する - 画像を一時的に見えない状態にしても、情報と操作の目的が分かるかを確認する
- ブラウザーのアクセシビリティツリーで、画像やボタンの名前を確認する
- NVDA、VoiceOver、TalkBackなどで前後の文章と続けて読み上げ、重複や不自然な間がないかを確認する
- 画像の用途を変更したときに、代替テキストも見直す
自動検査はalt属性の欠落を見つける助けになりますが、文章が画像の目的に合っているかは、周囲の文脈と合わせて人が確認する必要があります。
サイト全体の設計や運用も見直す場合は、Webアクセシビリティの実務ポイントも判断の土台になります。
代替テキストの判断をまとめる
- 情報を伝える画像では、そのページで必要な内容を
altへ書く - リンクやボタンの画像では、見た目ではなく移動先や操作を伝える
- 装飾画像や完全に重複する画像では、
alt=""を使う - 複雑な図の詳細は、短い
altだけに詰め込まず本文や表でも示す - 文字数よりも、目的、文脈、読み上げたときの自然さで評価する
適切な代替テキストは、画像を利用できない状況でも情報と操作を欠けさせないための実装です。
画像を追加するたびに目的を判断し、公開前の読み上げ確認までを制作手順に組み込みます。