アイコン¶
これらのガイドラインは、アイコンを対象にしたものです。
ここでアイコンとは、以下の目的で用いられている画像を指します：
オブジェクトの状態を表す
クリック可能なボタンやリンクを提供する
認知を可能にする¶
[MUST]テキスト情報の付与¶
- ガイドライン
[MUST]アイコンにはテキストのラベルを併せて表示し、それが難しい場合はアイコンの目的（表している状態、操作の結果）が分かるような代替テキストを付与する。
- チェック内容
- デザイン（チェックID: 0391）
アイコンには、その役割や示している状態を表すテキスト・ラベルが併せて表示されている。または
テキスト・ラベルを表示できない場合、色の違いだけでアイコンの意味の違いを表さず、形状（モチーフ）やサイズでも違いを示している。かつ
役割や意味がわかるalt属性の値を設計資料で明示している。
- コード（チェックID: 0401）
アイコンの役割や示している状態を表すテキストが表示されていて、
aria-labelledby属性で関連付けられている。またはalt属性またはaria-label属性で、そのようなテキストが指定されている。開発者ツールで確認すると、Accessible Nameに適切なテキストが設定されている状態になっている。
- プロダクト（チェックID: 0411、NVDAによるチェック実施方法の例）
アイコンの役割や示している状態が分かるテキストが、スクリーン・リーダーで読み上げられる。
[MUST]複数の視覚的要素を用いた表現¶
- ガイドライン
[MUST]アイコンに付与されているラベルが非表示のテキストの場合は、形状、サイズが同じで色だけが違う複数のアイコンを用いない。
- チェック内容
- デザイン（チェックID: 0391）
アイコンには、その役割や示している状態を表すテキスト・ラベルが併せて表示されている。または
テキスト・ラベルを表示できない場合、色の違いだけでアイコンの意味の違いを表さず、形状（モチーフ）やサイズでも違いを示している。かつ
役割や意味がわかるalt属性の値を設計資料で明示している。
- プロダクト（チェックID: 0412）
テキストのラベルが併せて表示されていないアイコンで、形状とサイズが同じで色だけが違うものがない。（例：異なる状態を表す複数のアイコンが、色の違いだけで状態の違いを表していない。）
[MUST]アイコンの一貫性¶
- ガイドライン
[MUST]同じ目的で用いられるアイコンには、サイト内で一貫性のある画像とテキストを用いる。
- チェック内容
- デザイン（チェックID: 0242）、プロダクト（チェックID: 0262）
同じ文脈において、遷移先が同じリンク、目的が同じボタンには、一貫したテキストやアイコンが使われている。
[MUST]コントラスト比の確保¶
- ガイドライン
[MUST]背景色とのコントラスト比を3:1以上にする。
- チェック内容
- デザイン（チェックID: 0001）、プロダクト（チェックID: 0021、axeによるチェック実施方法の例）
充分なコントラスト比 ([MUST]3:1以上、[SHOULD]4.5:1以上) が確保されている。
アイコンと背景色
画像化されたテキスト、その他の画像内のテキストや重要な情報と背景色
画像および画像化されたテキストとその隣接領域
テキストと背景色
[SHOULD]十分な大きさのクリック/タッチのターゲット¶
- ガイドライン
[SHOULD]リンクが画像の場合、クリック/タッチのターゲット・サイズは充分に大きいものにする。
デスクトップ向けWebでは最低24 x 24 CSS px、可能であれば44 x 44 CSS px以上
モバイル向けは44 x 44 CSS px以上
- チェック内容
- デザイン（チェックID: 0331）
ボタンなどのサイズが充分に大きいことを確認している。
- プロダクト（チェックID: 0351）
想定環境におけるクリッカブルなエリアのサイズが充分に大きいことを確認できている。