画像

これらのガイドラインは、画像に関するものです。なお、すべてのガイドラインが[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以上)

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

意図

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