WCAG 1.1.1: 非テキストコンテンツに適切な代替テキストがあるか確認する
画像・アイコン・SVG・iframeなど、目で見ている情報がテキストでも伝わる状態にします。装飾目的の画像は支援技術が読み上げないようにします。
意図的な失敗例: 情報画像に代替テキストがない
売上傾向を示す画像が空のaltになっており、画像を見ない利用者へ同等の情報が伝わりません。
確認観点
- 情報を伝える画像には、内容や役割が分かる代替テキストを設定する
- 装飾目的の画像は alt="" または aria-hidden="true" などで読み上げ対象から外す
- リンクやボタンとして機能する画像は、見た目ではなく「お問い合わせ」「次のページへ」など目的や動作を書く
- 情報を伝える画像は CSS 背景ではなく img や SVG などHTML上の要素で配置する
- 長い説明が必要な図表や画像は、altだけに詰め込まず本文・キャプション・近接テキストで補足できないか検討する
人の判断が必要な例
- 代替テキストが「画像です」「ロゴです」だけになっておらず、文脈に必要な内容を簡潔に伝えているか確認する
- 同じ画像でも、単なるイメージか場所・商品・状態の説明かによって代替テキストを変えているか確認する
- AIが生成した代替テキストは、画像の内容とページ文脈に合っているか人が確認する
- 画像の代わりにそのテキストだけを置いても、同じ役割を果たせる内容になっているか確認する
補助ツール候補
- custom-empty-alt
- image-alt-display
- svg-title
生成メモ
manual-judgment-catalog.ja.json の内容から生成しています。