WCAG 2.2の達成基準3.3.2「ラベルまたは指示」は、ユーザーに入力を求める場面で、何をどのように入力すればよいかを理解できる情報を示すためのLevel Aの基準です。
氏名のように項目名だけで目的が伝わる入力欄にはラベルを付け、日付の形式や必須条件などの追加情報が必要な入力欄には指示も添えます。
ラベルや指示が明確なら、画面を見て操作する人だけでなく、スクリーンリーダーなどの支援技術を使う人も入力欄の目的を把握しやすくなります。
フォーム全体の設計を見直す場合は、フォームの入力支援とエラー設計の基本もあわせて確認できます。
達成基準3.3.2で利用者に伝える情報
ラベルは、入力欄の目的を表す名前です。
「氏名」「メールアドレス」のように、ユーザーが何を入力する欄なのかを判断できる言葉を使います。
指示は、入力を完了するために必要な条件や形式を補う説明です。
「必須」「yyyy/mm/dd形式」「ハイフンを含める」といった情報が該当します。
| 伝える情報 | ユーザーが判断できること | 表示例 |
|---|---|---|
| ラベル | 何を入力する欄か | 氏名、電話番号 |
| 必須条件 | 入力を省略できるか | メールアドレス（必須） |
| 入力形式 | どの形で入力するか | yyyy/mm/dd |
| グループ名 | 複数の項目が何に属するか | 住所情報 |
達成基準が求めるのは、必要な情報をユーザーが入力前に理解できる状態です。
<label>、<fieldset>、<legend>、aria-describedbyは、その状態をHTMLで作るための実装方法として使えます。
ラベルを入力欄に関連付ける
<label>要素のfor属性と、入力欄のid属性に同じ値を指定します。
見た目の近さだけに頼らず、どのラベルがどの入力欄を説明しているのかをコード上でも明確にできます。
<label for='name'>氏名</label>
<input type='text' id='name' name='name'>「入力してください」のような言葉だけでは、入力内容を特定できません。
「氏名」「会社名」「電話番号」のように、欄の目的が単独で伝わるラベルを付けます。
必須条件と入力形式を見える形で示す
必須項目の表示
必須項目には、ラベル内に「必須」と明記します。
次の例では、見えるテキストとaria-requiredの両方で必須状態を示しています。
<label for='email'>メールアドレス（必須）</label>
<input type='email' id='email' name='email' aria-required='true'>「必須」を表す記号を使う場合でも、その記号が何を意味するのかをフォーム内で説明します。
ユーザーが記号の意味を推測しなくてもよい表示にすることが目的です。
入力形式の表示
特定の形式を求める入力欄では、形式を入力欄の近くに表示します。
次の例は、ラベルに形式を含め、入力欄にも具体例を添えています。
<label for='birth-date'>生年月日（yyyy/mm/dd）</label>
<input type='text' id='birth-date' name='birth-date' placeholder='例：1990/01/01'>形式をラベルにも記載しておけば、プレースホルダーだけに説明を任せずに済みます。
説明は、ユーザーが入力を始める前に確認できる具体的な言葉で示します。
関連する入力欄をグループとして説明する
複数の入力欄をひとまとまりとして扱う場合は、<fieldset>で囲み、<legend>でグループ名を示します。
住所のように複数項目で一つの情報を構成する場面では、個々のラベルに加えて全体の目的も伝えられます。
<fieldset>
<legend>住所情報</legend>
<label for='street'>住所</label>
<input type='text' id='street' name='street'>
<label for='city'>市区町村</label>
<input type='text' id='city' name='city'>
</fieldset>補足説明をaria-describedbyで結び付ける
支援技術は、スクリーンリーダーなど、ユーザーの操作や情報の理解を支えるソフトウェアや機能です。
入力欄の補足説明を支援技術にも伝えたい場合は、aria-describedbyで入力欄と説明文を関連付けます。
<label for='phone'>電話番号</label>
<input type='tel' id='phone' name='phone' aria-describedby='phone-format'>
<small id='phone-format'>入力例：090-1234-5678</small>aria-describedbyは補足説明を結び付けるために使い、入力欄の目的を表すラベルは別に用意します。
ラベルと補足説明の役割を詳しく整理したい場合は、フォームのラベルと説明におけるHTMLとARIAの使い分けも参考になります。
よくある不備と直し方
入力欄にラベルがない
次のコードでは、何を入力する欄なのかを判断できません。
<input type='text' name='name'><label>を追加し、forとidを同じ値にして関連付けます。
<label for='name'>氏名</label>
<input type='text' id='name' name='name'>必須項目だと判断できない
入力が必須でも、その条件が表示されていなければ、ユーザーは送信するまで気付けません。
ラベル内に「必須」と記載し、入力前に条件を確認できるようにします。
入力形式が曖昧である
日付や電話番号に特定の形式を求める場合は、受け付ける形式と入力例を示します。
「正しい形式で入力してください」とだけ書くのではなく、記事内の例のようにyyyy/mm/ddや090-1234-5678まで具体化します。
手動確認と自動チェックの進め方
ラベルや指示は、コードの関連付けと文章の分かりやすさを分けて確認します。
次の順番で見ると、実装上の不備と説明不足を整理しやすくなります。
- 各入力欄について、何を入力するのかがラベルだけで分かるか確認する。
- 必須条件や入力形式が、入力を始める前に見えるか確認する。
labelのforと入力欄のidが一致しているか確認する。- 関連項目の
fieldsetとlegend、補足説明のaria-describedbyが正しく対応しているか確認する。 - スクリーンリーダーで、ラベル、必須状態、補足説明を理解できるか確認する。
axeやWAVEなどの自動テストツールは、ラベルの関連付けやARIA属性の確認に利用できます。
自動チェックと手動確認の役割を整理する場合は、ウェブアクセシビリティチェックの進め方も参照してください。
実装前のチェックリスト
- 入力欄ごとに、目的が伝わる具体的なラベルがある。
- ラベルと入力欄が、
forとidで対応している。 - 必須条件と入力形式が、入力前に確認できる。
- 関連する入力欄にグループ名がある。
- 補足説明が必要な入力欄では、説明文との対応が明確である。
達成基準3.3.2への対応では、属性を追加すること自体ではなく、ユーザーが迷わず入力を進められる情報になっているかを確かめます。
ラベル、指示、グループ名、補足説明をそれぞれの役割に合わせて配置すれば、フォームの目的と入力条件が伝わりやすくなります。
当社では、ウェブアクセシビリティの導入を支援するUUU ウェブアクセシビリティを提供しています。
アクセシビリティ対応を進めたい方は、サービスの詳細をご覧ください。