画像

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

テキスト情報の提供

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

[MUST]画像の説明の提供

ガイドライン

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

チェック内容
デザイン（チェックID: 0421）

  • 画像に関する簡潔で過不足ない説明（alt属性値）が、設計資料で明示されている。かつ

  • 短いテキストでは充分に説明できない場合には、詳細な説明のテキストが設計資料で明示されている。

コード（チェックID: 0431）

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

  • 詳細な説明が必要な場合には、その説明が当該の画像の直前または直後に表示されている、またはaria-describedby属性で関連付けられている。

プロダクト（チェックID: 0441）

  • 画像の説明が適切に読み上げられる。

意図

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

対応するWCAG 2.1の達成基準

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

ガイドライン

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

チェック内容
デザイン（チェックID: 0451）

  • 情報や機能性を一切持たない画像は、説明のテキストを付加してはならないことが設計資料で明示されている。

コード（チェックID: 0461）

  • 情報や機能性を一切持たない画像には、空のalt属性（alt=""）やrole="presentation"が付与されていて、スクリーン・リーダーで読み上げられない。

プロダクト（チェックID: 0471）

  • 情報や機能性を一切持たない画像は、スクリーン・リーダーで読み上げられない。

意図

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

対応するWCAG 2.1の達成基準

表示と視覚的要素

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

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

ガイドライン

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

チェック内容
デザイン（チェックID: 0031）、プロダクト（チェックID: 0051）

  • グレイスケール表示でも利用に支障が出ない:

    • リンク箇所を判別できる

    • 画像、テキストの意図が伝わる

    • 入力フォームの必須項目、エラーを認知できる

意図

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

対応するWCAG 2.1の達成基準

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

ガイドライン

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

チェック内容
デザイン（チェックID: 0001）、プロダクト（チェックID: 0021）

  • 充分なコントラスト比 ([MUST]3:1以上、[SHOULD]4.5: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以上）

チェック内容
デザイン（チェックID: 0001）、プロダクト（チェックID: 0021）

  • 充分なコントラスト比 ([MUST]3:1以上、[SHOULD]4.5:1以上) が確保されている。

    • アイコンと背景色

    • 画像化されたテキスト、その他の画像内のテキストや重要な情報と背景色

    • 画像および画像化されたテキストとその隣接領域

    • テキストと背景色

意図

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