アイコン

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

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

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

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

テキスト情報の付与

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準

チェック内容

チェック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キーの操作でフォーカスされたとき

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

macOS VoiceOverによるチェック方法の例

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

  • VOキーと左右矢印キーでVoiceOverカーソルを操作し、アイコンがある箇所を読み上げさせたとき

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

チェック手順：モバイル

以下のiOS VoiceOverおよびAndroid TalkBackによるチェックを見足していることを確認する。

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

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

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

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

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

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

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

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

チェックID：0413

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下のNVDAによるチェックまたはmacOS VoiceOverによるチェックのいずれかを見足していることを確認する。

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

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

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

macOS VoiceOverによるチェック方法の例

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

チェック手順：モバイル

以下のiOS VoiceOverおよびAndroid TalkBackによるチェックを見足していることを確認する。

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

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

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

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

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

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

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

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準

チェック内容

チェックID：0391

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

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

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェックID：0412

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

アイコンの一貫性

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準

チェック内容

チェックID：0242

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェックID：0262

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

コントラスト比の確保

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準
参考情報

チェック内容

チェック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の達成基準
参考情報

チェック内容

チェック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の達成基準
参考情報

チェック内容

チェックID：0333

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

iOSの場合

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

Androidの場合

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

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

対象

デザイン

対象プラットフォーム

モバイル

重篤度

[NORMAL]