画像¶
これらのガイドラインは、画像に関するものです。なお、すべてのガイドラインが[MUST]です。
テキスト情報の提供¶
参考：テキストによる画像の説明
[MUST]画像の説明の提供¶
- ガイドライン
[MUST]画像に関する過不足のない説明をテキストで提供する。
- チェック内容
- デザイン（チェックID: 0421）
画像に関する簡潔で過不足ない説明（
alt属性値）が、設計資料で明示されている。かつ短いテキストでは充分に説明できない場合には、詳細な説明のテキストが設計資料で明示されている。
- コード（チェックID: 0431）
画像に関する簡潔で過不足ない説明が
alt属性やaria-label属性で付加されている。かつ詳細な説明が必要な場合には、その説明が当該の画像の直前または直後に表示されている、または
aria-describedby属性で関連付けられている。
- プロダクト（チェックID: 0441、NVDAによるチェック実施方法の例、axe DevToolsによるチェック実施方法の例）
画像の説明がスクリーン・リーダーで適切に読み上げられる。
[MUST]装飾目的の画像の無視¶
- ガイドライン
[MUST]純粋な装飾目的の画像は、スクリーン・リーダーなどの支援技術が無視するようにする。
- チェック内容
- デザイン（チェックID: 0451）
情報や機能性を一切持たない画像は、説明のテキストを付加してはならないことが設計資料で明示されている。
- コード（チェックID: 0461）
情報や機能性を一切持たない画像には、空の
alt属性（alt=""）やrole="presentation"が付与されていて、スクリーン・リーダーで読み上げられない。
- プロダクト（チェックID: 0471、NVDAによるチェック実施方法の例）
情報や機能性を一切持たない画像は、スクリーン・リーダーで読み上げられない。
表示と視覚的要素¶
[MUST]複数の視覚的要素を用いた表現¶
- ガイドライン
[MUST]特定の色に何らかの意味を持たせている場合、形状、模様など他の視覚的な要素も併せて用い、色が判別できなくてもその意味を理解できるようにする。
- チェック内容
- デザイン（チェックID: 0031）、プロダクト（チェックID: 0051）
グレイスケール表示でも利用に支障が出ない:
リンク箇所を判別できる
画像、テキストの意図が伝わる
入力フォームの必須項目、エラーを認知できる
[MUST]隣接領域とのコントラスト比の確保¶
- ガイドライン
[MUST]画像の隣接領域の色とのコントラスト比を3:1以上にする。
- チェック内容
- デザイン（チェックID: 0001）
アイコンや画像に関して、充分なコントラスト比 ([MUST]3:1以上、[SHOULD]4.5: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: 0002）
テキストおよび画像化されたテキストの表示色と背景色には、充分なコントラスト比が確保されている。
文字サイズが30px（22pt）以上の場合：3:1以上（[SHOULD] 4.5:1以上）
文字サイズが22px（18pt）以上で太字の場合：3:1以上（[SHOULD] 4.5:1以上）
その他の場合：4.5:1以上（[SHOULD] 7:1以上）