アイコン

これらのガイドラインは、アイコンを対象にしたものです。

ここでアイコンとは、以下の目的で用いられている画像を指します:

  • オブジェクトの状態を表す

  • クリック可能なボタンやリンクを提供する

認知を可能にする

[MUST] テキスト情報の付与

ガイドライン

[MUST] アイコンにはテキストのラベルを併せて表示し、それが難しい場合はアイコンの目的(表している状態、操作の結果)が分かるような代替テキストを付与する。

チェック内容
  • ビジュアル、マークアップ: すべてのアイコンにはテキストのラベルが付けられていて表示されている。または

  • ビジュアル、マークアップ: アイコンの役割や意味が分かるテキスト情報が付与されている。 (例:alt属性の使用)

意図

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

対応するWCAG 2.1の達成基準

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

ガイドライン

[MUST] アイコンに付与されているラベルが非表示のテキストの場合は、形状、サイズが同じで色だけが違う複数のアイコンを用いない。

チェック内容
  • ビジュアル: テキストのラベルが併せて表示されていないアイコンで、形状とサイズが同じで色だけが違うものがない。

意図

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

対応するWCAG 2.1の達成基準

[MUST] アイコンの一貫性

ガイドライン

[MUST] 同じ目的で用いられるアイコンには、サイト内で一貫性のある画像とテキストを用いる。

チェック内容
  • ビジュアル: テキストのラベルが併せて表示されていないアイコンで、形状とサイズが同じで色だけが違うものがない。

意図

予測可能性を上げ、混乱を防ぐ。

対応するWCAG 2.1の達成基準

[MUST] コントラスト比の確保

ガイドライン

[MUST] 背景色とのコントラスト比を3:1以上にする。

チェック内容
  • ビジュアル: アイコンの背景色とのコントラスト比が3:1以上になっている。

意図

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

対応するWCAG 2.1の達成基準

[SHOULD] 十分な大きさのクリック/タッチのターゲット

ガイドライン

[SHOULD] リンクが画像の場合、クリック/タッチのターゲット・サイズは充分に大きいものにする。

  • デスクトップ向けWebでは最低24 x 24 CSS px、可能であれば44 x 44 CSS px以上

  • モバイル向けは44 x 44 CSS px以上

チェック内容
  • ビジュアル: 開発者ツールを用いて、想定環境におけるクリッカブルなエリアのサイズが充分に大きいことを確認できている。

意図

ロービジョン者、細かい手の動きが難しい肢体不自由者の、誤ったクリック/タッチ操作を防ぐ。

対応するWCAG 2.1の達成基準