アイコン

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

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

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

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

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

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

意図

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

対応するWCAG 2.1の達成基準

SC 1.1.1：

チェック内容

チェックID：0391

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

  • アイコンには、その役割や示している状態を表すテキスト・ラベルが併せて表示されている。または

  • テキスト・ラベルを表示できない場合、色の違いだけでアイコンの意味の違いを表さず、形状（モチーフ）やサイズでも違いが示されている。かつ

  • 役割や意味がわかるalt属性の値が設計資料で明示されている。

チェックID：0401

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

  • アイコンの役割や示している状態を表すテキストが表示されていて、そのアイコンと明示的に関連付けられている。または

  • そのようなテキストがアイコンに付加されている。

実装方法の例：表示されているテキストとアイコンを関連付ける
Web

  • aria-labelledby属性を用いる

実装方法の例：アイコンにラベルを付加する
Web

  • alt属性またはaria-label属性を用いる

iOS

  • accessibilityLabelで指定する。

Android

  • contentDescription属性で指定する。

実装方法の例：適切な状態の確認
Web

  • 開発者ツールで確認すると、Accessible Nameに適切なテキストが設定されている状態になっている。

チェックID：0402

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

アイコンがテキストのラベルと併せて表示されている場合、同じ内容が重複してスクリーン・リーダーに読み上げられないようにする。

実装方法の例：スクリーン・リーダーに読み上げられないようにする
Web

  • img要素の場合、空のalt属性（alt=""）を指定

  • img要素以外の要素の場合、aria-label属性やaria-labelledby属性を指定しない

iOS

isAccessibilityElementをfalseにする。

Android

importantForAccessibilityをnoにする。

チェックID：0411

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

アイコンの役割や示している状態が分かるテキストが、スクリーン・リーダーで読み上げられる。

NVDAによるチェック実施方法の例

以下の操作をしたとき、アイコンの示す状態や機能が分かる読み上げがされることを確認する。

  • ブラウズ・モードでカーソルキー操作をして当該箇所を読み上げさせたとき

  • そのアイコンがボタンやリンクなど、フォーカスを受け取るものの場合、Tab/Shift+Tabキーの操作でフォーカスされたとき

iOS VoiceOverによるチェック実施方法の例

  • 1本指による右および左方向のフリックでアイコンに到達した際、そのアイコンの役割が分かるようなテキストが読み上げられることを確認する。

  • （フリックではなく）アイコンに触れたとき、そのアイコンの役割が分かるテキストが読み上げられることを確認する。

参考：1本指による右および左方向へのフリック

Android TalkBackによるチェック実施方法の例

  • 1本指による右および左方向のフリックでアイコンに到達した際、そのアイコンの役割が分かるようなテキストが読み上げられることを確認する。

  • （フリックではなく）アイコンに触れたとき、そのアイコンの役割が分かるテキストが読み上げられることを確認する。

参考：1本指による右および左方向へのフリック

チェックID：0413

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

アイコンがテキストのラベルと併せて表示されている場合、同じ内容が重複してスクリーン・リーダーに読み上げられない。

iOS VoiceOverによるチェック実施方法の例

1本指による右および左方向のフリックでフォーカスを移動した際、アイコンとそのアイコンに併記されているテキストが読み上げられ、結果として同じ内容が2度読まれるような状態になっていないことを確認する。

参考：1本指による右および左方向へのフリック

Android TalkBackによるチェック実施方法の例

1本指による右および左方向のフリックでフォーカスを移動した際、アイコンとそのアイコンに併記されているテキストが読み上げられ、結果として同じ内容が2度読まれるような状態になっていないことを確認する。

参考：1本指による右および左方向へのフリック

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

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

意図

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

対応するWCAG 2.1の達成基準

SC 1.4.1：

チェック内容

チェックID：0391

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

  • アイコンには、その役割や示している状態を表すテキスト・ラベルが併せて表示されている。または

  • テキスト・ラベルを表示できない場合、色の違いだけでアイコンの意味の違いを表さず、形状（モチーフ）やサイズでも違いが示されている。かつ

  • 役割や意味がわかるalt属性の値が設計資料で明示されている。

チェックID：0412

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

テキストのラベルが併せて表示されていないアイコンで、形状とサイズが同じで色だけが違うものがない。（例：異なる状態を表す複数のアイコンが、色の違いだけで状態の違いを表していない。）

[MUST]アイコンの一貫性

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

意図

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

対応するWCAG 2.1の達成基準

SC 3.2.4：

チェック内容

チェックID：0242

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

同じ文脈において、遷移先が同じリンク、目的が同じボタンには、一貫したテキストやアイコンが使われている。

チェックID：0262

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

同じ文脈において、遷移先が同じリンク、目的が同じボタンには、一貫したテキストやアイコンが使われている。

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

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

意図

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

対応するWCAG 2.1の達成基準

SC 1.4.11：

参考情報

チェック内容

チェックID：0001

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

アイコンや画像に関して、充分なコントラスト比 ([MUST]3:1以上、[SHOULD]4.5:1以上) が確保されている。

  • アイコンと背景色

  • 画像内の重要な情報とその背景色

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

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

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

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

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

意図

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

対応するWCAG 2.1の達成基準

SC 2.5.5：

参考情報

チェック内容

チェックID：0331

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

画像をリンクやボタンにする場合、クリックやタッチに反応する領域が充分な大きさになっていて、その領域が設計資料で明示されている。

Webの場合

デスクトップWebでは少なくとも24 x 24、なるべく44 x 44 CSS px、モバイルでは44 x 44 CSS px以上。

iOSの場合

44x44px（OSのUIガイドラインで示されている条件）

Androidの場合

  • タップサイズは48x48pxのサイズで表示上は8pxのスペースを設ける（OSのUIガイドラインで示されている条件）

  • 見た目上、横長の縦は36px、正方形は40pxを確保する

チェックID：0351

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

ボタンやリンクになっている画像は、クリックやタッチに反応するサイズが、充分な大きさになっている。

Webの場合

デスクトップWebでは少なくとも24 x 24、なるべく44 x 44 CSS px、モバイルでは44 x 44 CSS px以上。

iOSの場合

44x44px（OSのUIガイドラインで示されている条件）

Androidの場合

  • タップサイズは48x48pxのサイズで表示上は8pxのスペースを設ける（OSのUIガイドラインで示されている条件）

  • 見た目上、横長の縦は36px、正方形は40pxを確保する