代替テキストのガイドライン
1.1.1 非テキストコンテンツの達成基準（レベルA）
画像には代替テキストを提供する
この達成基準は、すべての画像や動画などの非テキストコンテンツについて、スクリーンリーダーなどの支援技術を使用する利用者を含め、誰もが情報を得られるようにすることを目的としています。代替テキストを提供することで、非テキストコンテンツの内容を理解しやすくします。
実践すべきこと
WCAG 2.0
代替テキストの設定
- すべての画像（非テキストコンテンツ）には、代替テキスト（alt属性）を設定する。
内容の説明
- 代替テキストでは、画像の内容を適切に説明する文章を用いる。
装飾用画像
- 装飾目的の画像には、意味のない情報を避けるために空のalt属性（alt=""）を設定する。
顔文字の使用を避ける
- 顔文字は使用しない。
運用者への注意
代替テキストの確認
- すべての画像に代替テキストが設定されていることを確認する。
内容の適切な表現
- 代替テキストが画像の内容を適切に表しているかを確認する。
「画像です。」という説明は不要
- 代替テキストに「〇〇の画像です。」のように「画像です。」という説明は不要。
語尾の表現
- 「です・ます」調でなくても問題ない。簡潔に伝えることを意識する。
写真の場合
- 写真の場合は、「〇〇写真」という形で、写真であることを伝える。
画像に文字が含まれている場合
- 画像に文字が含まれている場合は、同じ文字をなるべくHTMLの本文でも伝えるようにする。
開発者への注意
alt属性の必須化
- img要素には必ずalt属性を設定する。
aria-labelの利用
- 必要に応じてaria-labelを設定する。
- rol="img"とaria-hiddenは併用できない。
iframeのタイトル設定
- iframeにはtitleを設定する。
背景画像の限定
- CSSを使用して背景に設定される画像は、純粋に装飾目的のものに限定する。