画像代替テキスト アクセシビリティ監査ガイド

画像代替テキスト監査

WCAG基準1.1.1（非テキストコンテンツ）は最もよくテストされ、最も頻繁に不合格となる成功基準の一つです。すべての非テキスト要素には、同等の目的を果たすテキスト代替が必要です。

画像の種類と正しい代替テキスト

情報的画像は情報を伝えます：

• 代替テキストは画像の内容を簡潔に説明すべき
• 例：alt="2022年の100万ドルから2024年の300万ドルへの売上成長を示す棒グラフ"

装飾的画像は視覚的な興味を加えるが情報なし：

• 空のalt使用：alt=""
• またはCSS背景画像を使用
• alt="装飾" や alt="画像" は絶対に使用しない

機能的画像（リンクやボタン内）：

• 代替テキストは画像ではなく機能を説明
• 例：ボタン内の検索アイコン：alt="検索"

複雑な画像（チャート、図表、インフォグラフィック）：

• 簡潔な代替テキストと詳細な説明
• 詳細テキスト説明を指す aria-describedby を使用
• またはテキスト代替へのリンクを提供

画像リンク：

• 代替テキストはリンク先を説明
• 例：ホームページにリンクするロゴ：alt="会社名 - ホーム"

監査プロセス

すべての <img>、<svg>、<canvas>、CSS背景画像について：

1. 画像は装飾的か？ はいの場合、alt="" または role="presentation" を確認
2. 画像は情報的か？ はいの場合、代替テキストが情報を説明していることを確認
3. 画像は機能的か？ はいの場合、代替テキストが機能を説明していることを確認
4. 画像は複雑か？ はいの場合、詳細な説明が利用可能であることを確認
5. 代替テキストは長すぎないか？ 可能な限り125文字以下に保つ
6. 代替テキストが「〜の画像」や「〜の写真」で始まっていないか？ これらを削除 — スクリーンリーダーは既に画像として通知する

よくある不合格

• alt属性が完全に欠落（スクリーンリーダーがファイル名を読み上げる）
• 説明なしに「画像」や「写真」とだけ書かれた代替テキスト
• 空でない代替テキストを持つ装飾的画像（スクリーンリーダーユーザーにノイズを作成）
• 「チャート」だけが代替テキストの複雑なチャート
• ファイル名を使用したCMS生成の代替テキスト