アイコン
これらのガイドラインは、アイコンを対象にしたものです。
ここでアイコンとは、以下の目的で用いられている画像を指します：
オブジェクトの状態を表す
クリック可能なボタンやリンクを提供する
[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本指による右および左方向のフリックでアイコンに到達した際、そのアイコンの役割が分かるようなテキストが読み上げられることを確認する。
（フリックではなく）アイコンに触れたとき、そのアイコンの役割が分かるテキストが読み上げられることを確認する。
Android TalkBackによるチェック実施方法の例
1本指による右および左方向のフリックでアイコンに到達した際、そのアイコンの役割が分かるようなテキストが読み上げられることを確認する。
（フリックではなく）アイコンに触れたとき、そのアイコンの役割が分かるテキストが読み上げられることを確認する。
チェックID：0413
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[NORMAL]
アイコンがテキストのラベルと併せて表示されている場合、同じ内容が重複してスクリーン・リーダーに読み上げられない。
iOS VoiceOverによるチェック実施方法の例
1本指による右および左方向のフリックでフォーカスを移動した際、アイコンとそのアイコンに併記されているテキストが読み上げられ、結果として同じ内容が2度読まれるような状態になっていないことを確認する。
Android TalkBackによるチェック実施方法の例
1本指による右および左方向のフリックでフォーカスを移動した際、アイコンとそのアイコンに併記されているテキストが読み上げられ、結果として同じ内容が2度読まれるような状態になっていないことを確認する。
[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を確保する