適合レベル
A
※各レベルについては適合レベルとはをご覧ください
概要
<label>タグのfor属性などを用いて、入力フォームとその説明ラベルをプログラム的に関連付け、支援技術でも対応関係がわかるようにする。
具体的な実装方法
3.3.2 A
1. ⭕️良い例
各入力コントロールに対して、<label>要素を明示的に関連付けます。また、入力形式の指定など、補足的な説明が必要な場合は、aria-describedbyなどを用いて提供します。
ポイント:
<label>要素のfor属性の値と、対応する<input>要素のid属性の値を一致させます。- ラベルは、コントロールの直前または直後に配置し、視覚的にも関連性が分かるようにします。
- 必須項目や入力形式（例: 「半角数字で入力」）などの重要な指示は、ラベル内または関連付けられた説明文として提供します。
実装例 (HTML):
<!-- <label>要素を明示的に関連付ける例 -->
<label for="user_name">氏名:</label>
<input type="text" id="user_name" name="user_name">
<!-- プレースホルダーだけでは不十分 -->
<!-- 悪い例: <input type="text" placeholder="氏名"> -->
<!-- 説明文を関連付ける例 -->
<label for="password">パスワード:</label>
<input type="password" id="password" name="password" aria-describedby="password_hint">
<p id="password_hint">8文字以上の英数字で入力してください。</p>2. ❌悪い例
ラベルがない:
- 入力フィールドに対応する
<label>要素が存在しない。
ラベルが関連付けられていない:
<label>要素はあるが、for属性とid属性による明示的な関連付けが行われていない。
プレースホルダーをラベル代わりにしている:
placeholder属性のみで入力内容を示している。プレースホルダーは入力開始と同時に消えてしまい、スクリーンリーダーによっては読み上げられないため、ラベルの代替にはなりません。
なぜ問題なのか:
これらの実装では、支援技術が入力フィールドとそのラベルを正しく関連付けることができず、利用者にフィールドの目的を伝えることができません。
改善策:
- 全ての入力コントロールに、対応する
<label>要素をforとidで関連付けます。 - プレースホルダーは、あくまで入力のヒントとして補助的に使用し、ラベルの代わりにはしません。
3. プラットフォーム別の実装
Webページでは、主にHTMLの<label>要素とfor/id属性を用いて達成します。場合によっては、WAI-ARIAのaria-labelledbyやaria-describedbyを使用して、より複雑な関連付けを行うことも可能です。
4. 特殊なケースへの対応
ラベルが視覚的に不要な場合:
- 検索フォームの入力欄のように、隣にあるボタン（例: 「検索」）がラベルの役割を果たしている場合、視覚的にラベルを非表示にしつつ、スクリーンリーダー向けに提供する方法があります（例: CSSで画面外にテキストを配置する、
aria-label属性を使用する）。
実装例 (aria-label):
<input type="search" name="q" aria-label="サイト内検索">
<button type="submit">検索</button>確認観点
3.3.2 A
1. 定量的な基準の担保
自動チェックツールでの確認:
- LighthouseやAxeなどのツールは、フォームコントロールにラベルが関連付けられているかを強力にチェックできます。「Form elements have labels」などの項目で合否を確認します。
チェックリストの達成度:
2. 定性的な基準の担保
レビュー:
- コードレビューにおいて、フォーム要素と
<label>要素の関連付けが適切に行われているかを確認します。 - ラベルのテキストが、入力フィールドの目的を簡潔かつ明確に示しているかを確認します。
専門家による監査:
- アクセシビリティ専門家が、スクリーンリーダーでフォームを操作し、全てのコントロールのラベルが正しく読み上げられるか、また指示が明確に伝わるかを確認します。
- 視覚的なデザインと、プログラムによる解釈に齟齬がないかを評価します。