代替テキストのガイドライン

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を使用して背景に設定される画像は、純粋に装飾目的のものに限定する。

目次へ戻る