Webアクセシビリティの鍵を握る「画像の代替テキスト（alt）」の使い方ガイド
インターネットの世界では、視覚情報は非常に多くの役割を果たしています。特に画像は、情報の補足や感情の伝達、操作ガイドなど、多様な目的で使用されています。しかし、視覚に障害のある方や、画像を表示できない環境にいるユーザーにとっては、その情報を得る手段が限られています。
そこで登場するのが「代替テキスト（alt属性）」です。適切な代替テキストを設定することで、画像に含まれる情報を視覚以外の手段でも理解できるようにすることができ、Webアクセシビリティの大きな向上に繋がります。
本記事では、代替テキストの正しい書き方、活用の仕方、よくあるNG例などを丁寧に解説していきます。
1. 代替テキスト（alt属性）とは何か？
代替テキストとは、HTMLの<img>タグに含まれるalt属性に指定する画像の内容をテキストで説明する文です。
<img src="dog.jpg" alt="柴犬が芝生の上に座っている写真">
このように記述することで、画像が表示できない場合でもテキスト情報が表示され、スクリーンリーダーを使用するユーザーにも内容が伝わるようになります。
2. なぜ代替テキストがWebアクセシビリティにとって重要なのか？
1. 視覚障害のあるユーザーに情報を伝える
スクリーンリーダーは、画像に設定されたalt属性を読み上げることで、その画像が何を意味しているかを伝えます。画像の内容が理解できないと、ページ全体の文脈も見失ってしまうことがあります。
2. 通信環境やデバイスに依存しない情報伝達
モバイル回線や画像非表示の環境では、画像が読み込まれないことがあります。その際にも、altテキストがあれば情報の欠落を防ぐことができます。
3. SEO対策にも有効
Googleなどの検索エンジンは画像の内容を直接理解できないため、代替テキストの情報を参考にインデックス化します。的確なaltテキストはSEOにも貢献します。
3. アクセシブルな代替テキストを書くための基本原則
✅ 書くべき内容
- 画像が伝えようとしている情報
- コンテキストに基づいた説明
- 装飾画像でない限り、alt属性は省略しない
❌ 避けるべき内容
- 「画像」「写真」といった無意味な語の繰り返し（スクリーンリーダーが自動で伝えるため）
- ファイル名（例：
img_001.jpg） - 長すぎる文章（40〜100文字程度に収めるのが理想）
4. 目的別：画像ごとの代替テキストの書き方
【1】情報伝達のための画像（コンテンツ画像）
例：レシピ記事に表示された料理の写真
<img src="pasta.jpg" alt="バジルとトマトソースのスパゲッティが皿に盛られている">
→ 見た目と料理名を明記することで、料理の情報が伝わります。
【2】操作を示す画像（アイコンやボタン）
例：虫眼鏡アイコンで検索ボタンを表現
<img src="search-icon.png" alt="検索">
→ ボタンの機能そのものを簡潔に表現。
【3】装飾目的の画像（飾りや背景など）
例：見出しの横にある小さな飾り線
<img src="decorative-line.png" alt="">
→ alt属性を空にすることで、スクリーンリーダーが読み飛ばします。これを**「装飾画像のマークアップ」**と呼びます。
【4】画像にキャプションや周囲の文脈がある場合
例：記事中に「以下は新商品のパッケージです。」と書かれた直後に画像
<img src="product.jpg" alt="">
→ 周囲のテキストで画像内容が説明されている場合、冗長にならないようaltを空にする判断も可能です。
5. よくあるNG例と改善例
❌ NG：alt属性が設定されていない
<img src="dog.jpg">
→ スクリーンリーダーでは「画像」とだけ読み上げられ、意味が伝わりません。
✅ OK：具体的で簡潔な説明
<img src="dog.jpg" alt="芝生の上に座る柴犬">
→ 内容が正しく伝わるうえ、短くて読みやすいです。
6. 代替テキストの品質をチェックするためのポイント
- 🔎 画像の「目的」を正確に捉えられているか？
- ✍️ 読み上げたときに、文脈が自然か？
- 🧹 装飾画像にalt=""が設定されているか？
- 📱 モバイルやスクリーンリーダーで確認しているか？
検証ツールや支援技術
- NVDA（Windows）/ VoiceOver（macOS, iOS）/ TalkBack（Android）
→ 実際に読み上げて、違和感がないか確認できます - アクセシビリティツリーの確認（開発者ツール）
7. まとめ：代替テキストは「言葉の橋渡し」
画像の代替テキストは、視覚に頼らず情報を伝えるための「言葉の橋渡し」です。単なる補足ではなく、Webアクセシビリティを構成する重要な要素のひとつです。
✔️ 最後に押さえておきたいポイント
- 情報を伝える画像には、必ずalt属性をつける
- 装飾画像は、**空のalt（alt=“”）**でスキップ
- コンテキストを考え、具体的かつ簡潔に説明する
- スクリーンリーダーなどで実際に確認して調整する