アイコン¶
これらのガイドラインは、アイコンを対象にしたものです。
ここでアイコンとは、以下の目的で用いられている画像を指します：
オブジェクトの状態を表す
クリック可能なボタンやリンクを提供する
認知を可能にする¶
[MUST] テキスト情報の付与¶
- ガイドライン
[MUST] アイコンにはテキストのラベルを併せて表示し、それが難しい場合はアイコンの目的（表している状態、操作の結果）が分かるような代替テキストを付与する。
- チェック内容
ビジュアル、マークアップ： すべてのアイコンにはテキストのラベルが付けられていて表示されている。または
ビジュアル、マークアップ： アイコンの役割や意味が分かるテキスト情報が付与されている。 (例：
alt属性の使用)
[MUST] 複数の視覚的要素を用いた表現¶
- ガイドライン
[MUST] アイコンに付与されているラベルが非表示のテキストの場合は、形状、サイズが同じで色だけが違う複数のアイコンを用いない。
- チェック内容
ビジュアル： テキストのラベルが併せて表示されていないアイコンで、形状とサイズが同じで色だけが違うものがない。
[MUST] アイコンの一貫性¶
- ガイドライン
[MUST] 同じ目的で用いられるアイコンには、サイト内で一貫性のある画像とテキストを用いる。
- チェック内容
ビジュアル： テキストのラベルが併せて表示されていないアイコンで、形状とサイズが同じで色だけが違うものがない。
[MUST] コントラスト比の確保¶
- ガイドライン
[MUST] 背景色とのコントラスト比を3:1以上にする。
- チェック内容
ビジュアル： アイコンの背景色とのコントラスト比が3:1以上になっている。
[SHOULD] 十分な大きさのクリック/タッチのターゲット¶
- ガイドライン
[SHOULD] リンクが画像の場合、クリック/タッチのターゲット・サイズは充分に大きいものにする。
デスクトップ向けWebでは最低24 x 24 CSS px、可能であれば44 x 44 CSS px以上
モバイル向けは44 x 44 CSS px以上
- チェック内容
ビジュアル： 開発者ツールを用いて、想定環境におけるクリッカブルなエリアのサイズが充分に大きいことを確認できている。