アイコン

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

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

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

テキスト情報の付与

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

対象プラットフォーム

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-01がOK、かつ(0411-nvda-01または0411-macvo-01がOK)であることを確認する。

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

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

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

スクリーン・リーダーによって読み上げられる内容がアイコンの役割や状態を適切に表していることを確認する。

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-nvda-01または0413-macvo-01がOKであることを確認する。

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

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

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

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

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