Level AWCAG 2.2
1.1.1 非テキストコンテンツ
すべての非テキストコンテンツには、同等の目的を果たすテキストによる代替が提供されている。
なぜ重要か
視覚障害
スクリーンリーダーは画像を見られません。alt属性がなければ画像の内容を伝える手段がありません。
検索エンジン
検索エンジンは画像を直接理解できません。alt属性はSEOにも重要な役割を果たします。
低速回線
画像が読み込めない場合、alt属性のテキストが代わりに表示され内容を伝えます。
自動処理
翻訳ツールやテキスト要約などの自動処理が画像の内容を扱えるようになります。
ライブデモ
スクリーンリーダーが読む内容
情報的画像
読み上げ:「画像」
情報を伝える画像には具体的な説明が必要
装飾的画像
読み上げ:「画像」
装飾画像はalt=""で読み飛ばさせる
機能的画像
読み上げ:「画像」
ボタン・リンク内の画像は機能を説明する
alt属性がないと、スクリーンリーダーは「画像」としか読みません。 ファイル名（DSC_0042.jpg など）を読み上げることもあり、ユーザーを混乱させます。
ペルソナで理解する
山田さん（28歳）— 全盲
スクリーンリーダーでECサイトを利用。商品画像にaltがないと「画像」としか読まれず、何の商品か分かりません。「同じTシャツでも色違いがあるのに、どれがどれか区別できない」