画像には代替テキストがなければなりません

このルールがチェックする内容

<img>要素に代替テキストが存在する、またはnoneまたはpresentationのロールが存在することを確認してください.

なぜ重要なのか

WCAG 1.1.1では、意味のある画像に代替テキストが求められます。代替テキストがないと、スクリーンリーダーの利用者は写真がどの商品を写しているのかを判断できません。

修正方法

あらゆるウェブサイトの場合

1. CMSまたはテンプレートで、各画像の代替テキストに短く具体的な説明を追加します。
2. 買い物客にとって重要な情報、つまり商品名、色、写っている角度を記述します（例：「キャンバストートバッグ、オリーブ、正面」）。
3. 装飾目的の画像は、スクリーンリーダーが読み飛ばすように空のalt属性（alt=""）にします。

修正の確認方法

• 該当するページを再スキャンします。
• スクリーンリーダー（MacのVoiceOverはCmd+F5）を使い、商品画像がどう読み上げられるかを聞いて確認します。

FixReportsが検出する方法

当社のスキャンは、テストする各ページで実際のChromeブラウザを使ってaxe-coreのルールimage-altを実行し、不合格の要素ごとに、そのページ、マークアップ、該当する場合はスクリーンショットを報告します。

自動テストで確認できるのは、この特定の問題が存在することです。ページのそれ以外の部分がアクセシブルかどうかはわかりません。人がページを確認して初めて見つかるバリアもあります。