画像

これらのガイドラインは、画像に関するものです。なお、すべてのガイドラインが[MUST]です。

テキスト情報の提供

参考：テキストによる画像の説明

[MUST] 画像の説明の提供

ガイドライン

[MUST] 画像に関する過不足のない説明をテキストで提供する。

チェック内容

  • マークアップ： 画像に関する簡潔で過不足ない説明がalt属性やaria-label属性で付加されている。かつ

  • マークアップ： 短いテキストでは充分に説明できない場合には、aria-describedby属性を使うなどして、詳細な説明が提供されている。

意図

視覚障害者が画像の存在を認知し、内容を理解できるようにする。

対応するWCAG 2.1の達成基準

[MUST] 装飾目的の画像の無視

ガイドライン

[MUST] 純粋な装飾目的の画像は、スクリーン・リーダーなどの支援技術が無視するようにする。

チェック内容

  • マークアップ： 情報や機能性を一切持たない画像は、スクリーン・リーダーで読み上げさせたとき、画像の存在が分からないようになっている。（空のalt属性、role="img"などの使用）

意図

不要な情報が提示されないようにすることで、視覚障害者などの情報取得をスムースにする。

対応するWCAG 2.1の達成基準

表示と視覚的要素

参考：画像の表示とアクセシビリティー

[MUST] 複数の視覚的要素を用いた表現

ガイドライン

[MUST] 特定の色に何らかの意味を持たせている場合、形状、模様など他の視覚的な要素も併せて用い、色が判別できなくてもその意味を理解できるようにする。

チェック内容

  • ビジュアル： グレースケール表示でも意図が伝わるようになっている。

意図

視覚障害者や色弱者が、コンテンツを利用できるようにする。

対応するWCAG 2.1の達成基準

[MUST] 隣接領域とのコントラスト比の確保

ガイドライン

[MUST] 画像の隣接領域の色とのコントラスト比を3:1以上にする。

チェック内容

  • ビジュアル： 画像の隣接領域の色とのコントラストが3:1以上になっている。

意図

ロービジョン者が、コンテンツを利用できるようにする。

対応するWCAG 2.1の達成基準

[MUST] 画像内のテキストのコントラスト比

ガイドライン

[MUST] 画像内のテキストや、重要な情報を伝える視覚的要素の色と背景の色に、十分なコントラストを確保する。

  • テキストの文字サイズが30px（22pt）以上の場合： 3:1以上（[SHOULD] 4.5:1以上）

  • テキストの文字サイズが22px（18pt）以上で太字の場合： 3:1以上（[SHOULD] 4.5:1以上）

  • その他の場合： 4.5:1以上（[SHOULD] 7:1以上）

チェック内容

  • ビジュアル： 画像内のテキストや、重要な情報を伝える視覚的要素の色と背景の色に、十分なコントラストが確保されている。

意図

ロービジョン者が、コンテンツを利用できるようにする。