画像やアイコンに適切な代替テキストを提供する

画像やアイコンを使うときは、スクリーンリーダー利用者のために適切な代替テキストを提供する必要があります。ただし、すべての画像に代替テキストが必要というわけではありません。このドキュメントでは、いつ・どのように代替テキストを付けるべきかを説明します。

代替テキストを提供すべきとき

画像やアイコンが情報を伝える、または機能を表す場合は、必ず意味のある代替テキストを付けましょう。画像やアイコンしかない場面では、代替テキストが視覚情報を補う唯一の手段になるため、テキストがないとユーザー体験が大きく損なわれます。

❌ 誤った例：意味のあるアイコンに代替テキストがない

次のように代替テキストを空にすると、スクリーンリーダー利用者はこのボタンが何の機能なのか分かりません。

<button>
  <img src="search-icon.svg" alt="" />
</button>

✅ 正しい例：意味のあるアイコンに代替テキストを付ける

<button>
  <img src="search-icon.svg" alt="検索" />
</button>

代替テキストを付けなくてよいとき

1. 装飾目的の画像

画像が単なる装飾で、視覚的効果だけを目的としているなら、空の代替テキスト（alt=""）を使いましょう。

❌ 誤った例：装飾画像に不要な代替テキスト

スクリーンリーダーがこのテキストを読み上げ、不要な情報となってしまいます。

<img src="divider.png" alt="区切り線" />

✅ 正しい例：装飾画像には空のalt属性

<img src="divider.png" alt="" />

2. 画像の周辺に説明テキストがある場合

画像の近くに十分な説明があるなら、画像側は空の代替テキストを使いましょう。

❌ 誤った例：重複する代替テキスト

次のように周囲に説明があるのに、同じ内容を代替テキストとしても提供すると、スクリーンリーダーでは「新製品スマートフォン 新製品スマートフォン」のように重複して読み上げ、混乱の原因になります。

<figure>
  <img src="product.jpg" alt="신제품 스마트폰" />
  <figcaption>新製品スマートフォン</figcaption>
</figure>

✅ 正しい例：キャプションがある画像では省略

<figure>
  <img src="product.jpg" alt="" />
  <figcaption>新製品スマートフォン</figcaption>
</figure>

3. アイコンがテキストと一緒に使われる場合

アイコンがテキストと一緒にボタンやリンクで使われるときは、空の代替テキストを使いましょう。

❌ 誤った例：不要な重複情報

スクリーンリーダーで「削除 アイコン 削除」と重複して読まれてしまい、かえってわかりにくくなります。

<button>
  <img src="trash-icon.svg" alt="削除アイコン" />
  削除
</button>

✅ 正しい例：テキストがあるアイコンでは省略

<button>
  <img src="trash-icon.svg" alt="" />
  削除
</button>

効果的な代替テキストを書く

良い代替テキストは短く、明確で、画像の目的に合っている必要があります。以下の原則を参考に、状況に合わせて記述しましょう。

1. 明確かつ具体的に書く

代替テキストは、その画像が伝える意味を正確に説明するべきです。あいまいな言葉や抽象的な表現は、ユーザーが画像から得るべき情報を理解しづらくします。

区分	例	説明
❌ 悪い例	"アイコン"	アイコンの用途や機能に関する情報がありません。
✅ 良い例	"検索"	アイコンが何を意味するかを明確に伝えます。
❌ 悪い例	"グラフ"	このグラフが何を示すのか分かりません。
✅ 良い例	"2023年の売上グラフ"	グラフがどのデータを示すかを具体的に説明します。

2. 不要な語を省く

代替テキストはスクリーンリーダーが読むためのものなので、「アイコン」「ボタン」のような語はたいてい冗長です。スクリーンリーダーは、画像を含む要素の役割（ボタンなど）を既に理解しているため、代替テキストでは情報だけを簡潔に伝えるのが望ましいです。

区分	例	説明
✅ 良い例	"検索"
❌ 悪い例	"検索アイコン"	スクリーンリーダーは「検索、ボタン」と読むため、「アイコン」は重複して不要です。
✅ 良い例	"閉じる"
❌ 悪い例	"閉じるボタン"	ボタンという役割は既に明らかなので、テキストでは省略したほうがすっきりします。

3. 画像の目的と文脈を考慮する

同じ画像でも、使われる文脈によって適切な代替テキストは変わり得ます。次のコードで「矢印」という説明は、見た目を述べているだけで、ユーザーにどんな操作が可能かは伝えません。

「前のページへ移動」のような代替テキストは、機能を正確に説明し、ユーザーの期待と実際の動作を一致させます。

<!-- ❌ 誤った例：文脈を考慮しない代替テキスト -->
<img src="arrow.png" alt="矢印" />
<img src="arrow.png" alt="矢印" />

<!-- ✅ 正しい例：文脈に合った代替テキスト -->
<img src="arrow.png" alt="前のページへ移動" />
<img src="arrow.png" alt="次のページへ移動" />