アイコン
これらのガイドライン項目は、アイコンを対象にしたものです。
ここでアイコンとは、以下の目的で用いられている画像を指します：
オブジェクトの状態を表す
クリック可能なボタンやリンクを提供する
テキスト情報の付与
アイコンにはテキストのラベルを併せて表示し、それが難しい場合はアイコンの目的（表している状態、操作の結果）が分かるような代替テキストを付与する。
- 対象プラットフォーム
Web、モバイル
- 意図
視覚障害者が画像の存在を認知し、内容を理解できるようにする。
- 対応するWCAG 2.1の達成基準
達成基準1.1.1(レベルA)：
チェック内容
チェックID：0391
アイコンには、その役割や示している状態を表すテキスト・ラベルが併せて表示されている。または
テキスト・ラベルを表示できない場合、色の違いだけでアイコンの意味の違いを表さず、形状（モチーフ）やサイズでも違いが示されている。かつ
役割や意味がわかる
alt属性の値が設計資料で明示されている。
- 対象
デザイン
- 対象プラットフォーム
Web、モバイル
- 重篤度
[MAJOR]
チェック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]
チェック手順：Web
以下のaxe DevToolsによるチェックを満たしていて、かつNVDAによるチェックまたはmacOS VoiceOverによるチェックのいずれかを満たしていることを確認する。
axe DevToolsによるチェック方法の例
「ボタンには認識可能なテキストが存在しなければなりません (Buttons must have discernible text)」という問題が出ないことを確認する。
NVDAによるチェック方法の例
以下の操作をしたとき、アイコンの示す状態や機能が分かる読み上げがされることを確認する。
ブラウズ・モードで矢印キーを操作してアイコンがある箇所を読み上げさせたとき
そのアイコンがボタンやリンクなど、フォーカスを受け取るものの場合、Tab/Shift+Tabキーの操作でフォーカスされたとき
macOS VoiceOverによるチェック方法の例
以下の操作をしたとき、アイコンの示す状態や機能が分かる読み上げがされることを確認する。
VOキーと左右矢印キーでVoiceOverカーソルを操作し、アイコンがある箇所を読み上げさせたとき
そのアイコンがボタンやリンクなど、フォーカスを受け取るものの場合、Tab/Shift+Tabキーの操作でフォーカスされたとき
チェック手順：モバイル
以下のiOS VoiceOverおよびAndroid TalkBackによるチェックを満たしていることを確認する。
iOS VoiceOverによるチェック方法の例
1本指による右および左方向のフリックでアイコンに到達した際、そのアイコンの役割が分かるようなテキストが読み上げられることを確認する。
（フリックではなく）アイコンに触れたとき、そのアイコンの役割が分かるテキストが読み上げられることを確認する。
Android TalkBackによるチェック方法の例
1本指による右および左方向のフリックでアイコンに到達した際、そのアイコンの役割が分かるようなテキストが読み上げられることを確認する。
（フリックではなく）アイコンに触れたとき、そのアイコンの役割が分かるテキストが読み上げられることを確認する。
チェックID：0413
アイコンがテキストのラベルと併せて表示されている場合、同じ内容が重複してスクリーン・リーダーに読み上げられない。
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[NORMAL]
チェック手順：Web
以下のNVDAによるチェックまたはmacOS VoiceOverによるチェックのいずれかを満たしていることを確認する。
NVDAによるチェック方法の例
ブラウズ・モードでの矢印キーの操作で、当該のアイコンとテキスト・ラベルがある箇所を通過したとき、アイコンとそのアイコンに併記されているテキストの両方が読み上げられるなど、結果として同じ内容が2度読まれるような状態になっていないことを確認する。
macOS VoiceOverによるチェック方法の例
VOキーと左右矢印キーによるVoiceOverカーソルの操作で当該のアイコンとテキスト・ラベルがある箇所を通過したとき、アイコンとそのアイコンに併記されているテキストの両方が読み上げられるなど、結果として同じ内容が2度読まれるような状態になっていないことを確認する。
チェック手順：モバイル
以下のiOS VoiceOverおよびAndroid TalkBackによるチェックを満たしていることを確認する。
iOS VoiceOverによるチェック方法の例
1本指による右および左方向のフリックでフォーカスを移動して当該のアイコンとテキスト・ラベルがある箇所を通過したとき、アイコンとそのアイコンに併記されているテキストの両方が読み上げられるなど、結果として同じ内容が2度読まれるような状態になっていないことを確認する。
Android TalkBackによるチェック方法の例
1本指による右および左方向のフリックでフォーカスを移動して当該のアイコンとテキスト・ラベルがある箇所を通過したとき、アイコンとそのアイコンに併記されているテキストの両方が読み上げられるなど、結果として同じ内容が2度読まれるような状態になっていないことを確認する。
複数の視覚的要素を用いた表現
アイコンに付与されているラベルが非表示のテキストの場合は、形状、サイズが同じで色だけが違う複数のアイコンを用いない。
- 対象プラットフォーム
Web、モバイル
- 意図
視覚障害者や色弱者が、コンテンツを利用できるようにする。
- 対応するWCAG 2.1の達成基準
達成基準1.4.1(レベルA)：
チェック内容
チェックID：0391
アイコンには、その役割や示している状態を表すテキスト・ラベルが併せて表示されている。または
テキスト・ラベルを表示できない場合、色の違いだけでアイコンの意味の違いを表さず、形状（モチーフ）やサイズでも違いが示されている。かつ
役割や意味がわかる
alt属性の値が設計資料で明示されている。
- 対象
デザイン
- 対象プラットフォーム
Web、モバイル
- 重篤度
[MAJOR]
チェックID：0412
テキストのラベルが併せて表示されていないアイコンで、形状とサイズが同じで色だけが違うものがない。（例：異なる状態を表す複数のアイコンが、色の違いだけで状態の違いを表していない。）
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[MAJOR]
アイコンの一貫性
同じ目的で用いられるアイコンには、サイト内で一貫性のある画像とテキストを用いる。
- 対象プラットフォーム
Web、モバイル
- 意図
予測可能性を上げ、混乱を防ぐ。
- 対応するWCAG 2.1の達成基準
達成基準3.2.4(レベルAA)：
チェック内容
チェックID：0242
同じ文脈において、遷移先が同じリンク、目的が同じボタンには、一貫したテキストやアイコンが使われている。
- 対象
デザイン
- 対象プラットフォーム
Web、モバイル
- 重篤度
[NORMAL]
チェックID：0262
同じ文脈において、遷移先が同じリンク、目的が同じボタンには、一貫したテキストやアイコンが使われている。
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[NORMAL]
コントラスト比の確保
背景色とのコントラスト比を3:1以上にする。
- 対象プラットフォーム
Web、モバイル
- 意図
ロービジョン者が、コンテンツを利用できるようにする。
- 対応するWCAG 2.1の達成基準
達成基準1.4.11(レベルAA)：
- 参考情報
チェック内容
チェックID：0001
アイコンや画像に関して、3:1以上のコントラスト比が確保されている。
アイコンと背景色
画像内の重要な情報とその背景色
画像および画像化されたテキストとその隣接領域
- 対象
デザイン
- 対象プラットフォーム
Web、モバイル
- 重篤度
[NORMAL]
十分な大きさのクリック/タッチのターゲット
画像をリンクやボタンにする場合、クリック/タッチのターゲット・サイズは充分に大きいものにする。
デスクトップ向けWebでは最低24 x 24 CSS px、可能であれば44 x 44 CSS px以上
モバイル向けWebでは44 x 44 CSS px以上
- 対象プラットフォーム
Web
- 意図
ロービジョン者、細かい手の動きが難しい肢体不自由者の、誤ったクリック/タッチ操作を防ぐ。
- 対応するWCAG 2.1の達成基準
達成基準2.5.5(レベルAAA)：
- 参考情報
- 関連FAQ
チェック内容
チェックID：0331
画像をリンクやボタンにする場合、クリックやタッチに反応する領域が充分な大きさになっていて、その領域が設計資料で明示されている。
デスクトップWebでは最低24 x 24 CSS px、なるべく44 x 44 CSS px以上
モバイルWebでは44 x 44 CSS px以上
- 対象
デザイン
- 対象プラットフォーム
Web
- 重篤度
[NORMAL]
チェックID：0351
ボタンやリンクになっている画像は、クリックやタッチに反応するサイズが、充分な大きさになっている。
デスクトップ向けWebでは最低24 x 24 CSS px、なるべく44 x 44 CSS px以上
モバイル向けWebでは44 x 44 CSS px以上
- 対象
プロダクト
- 対象プラットフォーム
Web
- 重篤度
[NORMAL]
十分な大きさのクリック/タッチのターゲット（モバイル）
画像をリンクやボタンにする場合、クリック/タッチのターゲット・サイズは充分に大きいものにする。
44 x 44 CSS px以上、または
OSのインターフェイス・ガイドラインを満たすサイズ
- 対象プラットフォーム
モバイル
- 意図
ロービジョン者、細かい手の動きが難しい肢体不自由者の、誤ったクリック/タッチ操作を防ぐ。
- 対応するWCAG 2.1の達成基準
達成基準2.5.5(レベルAAA)：
- 参考情報
チェック内容
チェックID：0333
画像をリンクやボタンにする場合、クリックやタッチに反応する領域が充分な大きさになっていて、その領域が設計資料で明示されている。
- iOSの場合
44 x 44 px（OSのUIガイドラインで示されている条件）
- Androidの場合
タップサイズは48 x 48 pxのサイズで表示上は8pxのスペースを設ける（OSのUIガイドラインで示されている条件）
見た目上横長の領域については縦方向に36px、正方形の領域については40pxを確保する
- 対象
デザイン
- 対象プラットフォーム
モバイル
- 重篤度
[NORMAL]