アイコン

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

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

オブジェクトの状態を表す
クリック可能なボタンやリンクを提供する

テキスト情報の付与

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準

達成基準1.1.1(レベルA)：
- Non-text Content
- 非テキストコンテンツ

チェック内容

チェック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

以下の0411-axe-01を満たしている、かつ(0411-content-00を満たしている、または(0411-nvda-01または0411-macvo-01を満たしている))ことを確認する。

0411-axe-01：axe DevToolsによるチェック方法の例

axe DevToolsで「ボタンには認識可能なテキストが存在しなければなりません (Buttons must have discernible text)」という問題が出ない。

0411-content-00：その他の手段によるチェック方法の例

チェック対象の画面にアイコンが存在しない。

0411-nvda-01：NVDAによるチェック方法の例

NVDAで以下の操作をしたとき、アイコンの役割や状態を適切に表す読み上げがされる。

ブラウズ・モードで矢印キーを操作してアイコンがある箇所を読み上げさせたとき
そのアイコンがボタンやリンクなど、フォーカスを受け取るものの場合、Tab/Shift+Tabキーの操作でフォーカスされたとき

参考動画：アイコンの役割や示している状態【NVDAでアクセシビリティーチェック】

0411-macvo-01：macOS VoiceOverによるチェック方法の例

macOS VoiceOverで以下の操作をしたとき、アイコンの役割や状態を適切に表す読み上げがされる。

VOキーと左右矢印キーでVoiceOverカーソルを操作し、アイコンがある箇所を読み上げさせたとき
そのアイコンがボタンやリンクなど、フォーカスを受け取るものの場合、Tab/Shift+Tabキーの操作でフォーカスされたとき

チェックID：0413

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

対象: プロダクト
対象プラットフォーム: Web、モバイル
重篤度: [NORMAL]

チェック手順：Web

以下の0413-content-00を満たしている、または(0413-nvda-01または0413-macvo-01を満たしている)ことを確認する。

0413-content-00：その他の手段によるチェック方法の例

チェック対象の画面にアイコンが存在しない。

0413-nvda-01：NVDAによるチェック方法の例

NVDAのブラウズ・モードでの矢印キーの操作で、当該のアイコンとテキスト・ラベルがある箇所を通過したとき、アイコンとそのアイコンに併記されているテキストの両方が読み上げられるなど、結果として同じ内容が2度読まれるような状態になっていない。

参考動画：アイコンの説明が重複しない【NVDAでアクセシビリティーチェック】

0413-macvo-01：macOS VoiceOverによるチェック方法の例

macOS VoiceOverのVOキーと左右矢印キーによるVoiceOverカーソルの操作で、当該のアイコンとテキスト・ラベルがある箇所を通過したとき、アイコンとそのアイコンに併記されているテキストの両方が読み上げられるなど、結果として同じ内容が2度読まれるような状態になっていない。

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

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準

達成基準1.4.1(レベルA)：
- Use of Color
- 色の使用

チェック内容

チェックID：0391

アイコンには、その役割や示している状態を表すテキスト・ラベルが併せて表示されている。または
テキスト・ラベルを表示できない場合、色の違いだけでアイコンの意味の違いを表さず、形状（モチーフ）やサイズでも違いが示されている。かつ
役割や意味がわかるalt属性の値が設計資料で明示されている。

対象: デザイン
対象プラットフォーム: Web、モバイル
重篤度: [MAJOR]

チェックID：0412

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

対象: プロダクト
対象プラットフォーム: Web、モバイル
重篤度: [MAJOR]

チェック手順：Web

以下の0412-content-00または0412-content-01を満たしていることを確認する。

0412-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、テキストのラベルが併せて表示されていないアイコンが存在しない。

0412-content-01：その他の手段によるチェック方法の例

テキストのラベルが合わせて表示されていないアイコンで異なる状態や機能を表しているものは、色以外の視覚的な違いもある。

アイコンの一貫性

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準

達成基準3.2.4(レベルAA)：
- Consistent Identification
- 一貫した識別性

チェック内容

チェックID：0242

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

対象: デザイン
対象プラットフォーム: Web、モバイル
重篤度: [NORMAL]

チェックID：0262

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

対象: プロダクト
対象プラットフォーム: Web、モバイル
重篤度: [NORMAL]

チェック手順：Web

以下の0262-content-00または0262-content-01を満たしていることを確認する。

0262-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、同じ画面に遷移する複数のリンクや、同じ機能を実行する複数のボタンが存在しない。

0262-content-01：その他の手段によるチェック方法の例

同じ画面に遷移する複数のリンクや、同じ機能を実行する複数のボタンには、一貫したテキストやアイコンが使われている。

コントラスト比の確保

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準

達成基準1.4.11(レベルAA)：
- Non-text Contrast
- 非テキストのコントラスト

参考情報

チェック内容

チェック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)：
- Target Size
- ターゲットのサイズ

参考情報

クリックやタップのターゲット・サイズに関連する問題とターゲット・サイズの確認方法

関連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
重篤度: [NORMAL]

チェック手順：Web

以下の0351-content-00または0351-content-01を満たしていることを確認する。

0351-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、ボタンやリンクになっている画像が存在しない。

0351-content-01：その他の手段によるチェック方法の例

ボタンやリンクになっている画像のクリックやタッチに反応するサイズが、デスクトップ向けWebでは最低24 x 24 CSS px、なるべく44 x 44 CSS px以上に、モバイル向けWebでは44 x 44 CSS px以上になっている。

十分な大きさのクリック/タッチのターゲット（モバイル）

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

44 x 44 CSS px以上、または
OSのインターフェイス・ガイドラインを満たすサイズ

対象プラットフォーム

モバイル

意図

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

対応するWCAG 2.1の達成基準

達成基準2.5.5(レベルAAA)：
- Target Size
- ターゲットのサイズ

参考情報

クリックやタップのターゲット・サイズに関連する問題とターゲット・サイズの確認方法

チェック内容

チェックID：0333

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

iOSの場合

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

Androidの場合

タップサイズは48 x 48 pxのサイズで表示上は8pxのスペースを設ける（OSのUIガイドラインで示されている条件）
見た目上横長の領域については縦方向に36px、正方形の領域については40pxを確保する

対象

デザイン

対象プラットフォーム

モバイル

重篤度

[NORMAL]