適合レベル
A
※各レベルについては適合レベルとはをご覧ください
概要
ボタンなどのUIコンポーネントに表示されているテキストラベルが、プログラム上の名前（アクセシブルネーム）にも含まれるように実装する。
具体的な実装方法
2.5.3 A
1. ⭕️良い例
アクセシブルな名前が見た目のラベルを完全に含んでいる
- 見た目のラベル:
検索 - アクセシブルな名前:
検索
<button>検索</button>アクセシブルな名前の先頭に、見た目のラベルのテキストが含まれている
- 見た目のラベル:
送信 - アクセシブルな名前:
アンケートを送信
<button aria-label="アンケートを送信">送信</button>2. ❌悪い例
アクセシブルな名前が見た目のラベルのテキストを含んでいない
- 見た目のラベル:
メニュー - アクセシブルな名前:
ナビゲーションを開く
<button aria-label="ナビゲーションを開く">メニュー</button>なぜ問題なのか
- 音声入力利用者が「メニュー、クリック」と発話しても、アクセシブルな名前が「ナビゲーションを開く」であるため、システムは「メニュー」というコンポーネントを見つけられず、操作が失敗します。
改善策
- アクセシブルな名前の先頭に、見た目のラベルと同じ文字列を含めるようにします。
<button aria-label="メニュー ナビゲーションを開く">メニュー</button>3.プラットフォーム別の実装
この達成基準は、UIコンポーネントのアクセシブルな名前と、そのコンポーネント内に**目に見える形で表示されているテキスト（ラベル）**の関係性に関するものです。
- アクセシブルな名前の算出順序に従い、名前を決定します。一般的には
aria-labelledby,aria-label,<label>要素, テキストノードの順で優先されます。 - 実装の原則:
aria-labelなどでアクセシブルな名前を上書きする場合は、必ず画面に表示されているテキストを名前の先頭に含めるようにします。
4.特殊なケースへの対応
記号や大文字・小文字
- アクセシブルな名前と見た目のラベルの記号や大文字・小文字は、プログラムで同一であると解釈されるため、完全に一致している必要はありません。（例：見た目が「Next >」、
aria-labelが「Next」でも問題ありません）
テキスト以外のラベル
- 画像やアイコンがラベルとして機能している場合は、この達成基準の対象外です。
確認観点
2.5.3 A
1.定量的な基準の担保
自動チェックツールでの合格
- Lighthouseやaxe DevToolsなどのツールは、この問題を部分的に検出できる可能性がありますが、最終的には手動での確認が必要です。
チェックリストの達成度
2.定性的な基準の担保
レビュー
- コードレビューの際、
aria-labelなどの属性が使われている箇所を特定し、その値とコンポーネントの見た目のラベルを比較して、ラベルのテキストがアクセシブルな名前に含まれているかを確認します。
専門家による監査
- 専門家は、ブラウザの開発者ツールでアクセシビリティツリーを調査し、各コンポーネントのアクセシブルな名前を確認します。その上で、音声入力ソフトウェア（OS標準の機能や専用ソフトなど）を実際に使用して、画面に見えるラベルを発話することで、意図通りにコンポー_ポーネント_が操作できるかをテストします。