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

<https://www.fixreports.com/ja/issues/image-alt>

WCAG 1.1.1 非テキストコンテンツ・レベルA

画像に代替テキストがないため、スクリーンリーダーの利用者には何が写っているのかがわかりません。

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

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

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

### Shopifyの場合
1. Shopifyの管理画面で「商品管理 > [商品] > メディア」を開き、各画像をクリックして「代替テキスト」を入力します。セクションの画像は、「オンラインストア > テーマ > カスタマイズ」を開き、セクションの設定で画像の代替テキストを設定します。
2. 買い物客にとって重要な情報、つまり商品名、色、写っている角度を記述します（例：「キャンバストートバッグ、オリーブ、正面」）。
3. 装飾目的の画像は、スクリーンリーダーが読み飛ばすように空のalt属性（alt=""）にします。

### WooCommerceとWordPressの場合
1. WordPressで「メディア > ライブラリ」を開き、各画像を選択して「代替テキスト」を入力します。商品ギャラリーの画像も同じ欄を使います。
2. 買い物客にとって重要な情報、つまり商品名、色、写っている角度を記述します（例：「キャンバストートバッグ、オリーブ、正面」）。
3. 装飾目的の画像は、スクリーンリーダーが読み飛ばすように空のalt属性（alt=""）にします。

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

## 出典
- axe-coreのルールのドキュメント（Deque）: https://dequeuniversity.com/rules/axe/4.13/image-alt
- WCAG 1.1.1の解説（W3C）: https://www.w3.org/WAI/WCAG22/Understanding/non-text-content