フォームのlabel要素は入力欄とfor属性で関連付ける

フォームの項目名は、入力欄の横に文字を置くだけでは足りません。label要素のfor属性と、入力欄のid属性を同じ値にして関連付けます。これにより、見た目の位置関係に頼らず、支援技術も項目名と入力欄の関係を取得できます。

基本は、labelと入力欄を明示的に関連付ける書き方です。文字入力欄だけでなく、textarea、select、チェックボックス、ラジオボタンにも使えます。

for属性とid属性には同じ値を指定する

お名前の入力欄なら、次のように書きます。

<label for="customer-name">お名前</label>
<input type="text" name="customer_name" id="customer-name">

for="customer-name"は、id="customer-name"を持つ入力欄を指します。大文字と小文字を含め、二つの値を正確にそろえます。同じページ内で同じidを重複させてはいけません。

name属性とid属性の役割は別です。nameは、フォームを送信するときに入力値を識別する名前です。labelのfor属性が指すのはnameではなくidです。二つに同じ値を使うことはできますが、どちらの属性も省略しません。

明示的に関連付ければ、labelと入力欄を入れ子にする必要はありません。表の別のセルに置く場合のように、HTML上で離れていても、forとidが対応していれば関係を示せます。

文字を入力欄の横に置くだけでは関係を示せない

次のHTMLは、「お名前」という文字と入力欄を並べています。しかし、二つの関係はHTMLに記述されていません。

<span>お名前</span>
<input type="text" name="customer_name" id="customer-name">

画面を見れば、近くにある文字を項目名だと推測できます。支援技術は、見た目の近さだけを項目名と入力欄の関係として利用できるとは限りません。WCAG 2.0の達成基準1.3.1は、表示によって伝えている情報、構造、関係を、プログラムが解釈できる形にするか、テキストで提供するよう求めています。

labelのfor属性と入力欄のid属性を対応させれば、関係をHTMLに記述できます。HTML 4.01のLABEL要素の仕様も、forの値を、関連付けるフォーム部品のidと同じ値にするよう定めています。

labelの中に入力欄を入れる方法もある

label要素の中へ入力欄を入れると、for属性を使わずに暗黙的な関連付けができます。

<label>
  お名前
  <input type="text" name="customer_name">
</label>

この書き方では、一つのlabel要素に入れられるフォーム部品は一つです。また、項目名と入力欄を別の場所へ分けられません。

WCAG 2.0の実装方法H44は、一部の支援技術が暗黙的な関連付けを正しく扱わないと説明しています。特別な理由がなければ、forとidを使う明示的な関連付けを選びます。

チェックボックスは説明文もクリックできるようにする

チェックボックスとラジオボタンでは、入力欄のあとにlabelを置きます。

<input type="checkbox" name="reply_copy" id="reply-copy">
<label for="reply-copy">返信内容の控えを受け取る</label>

この例では、小さなチェックボックスだけでなく、「返信内容の控えを受け取る」という文字もクリックできます。H44は、labelとフォーム部品を関連付ける利点として、クリックできる範囲が広がることを挙げています。

ただし、クリックできれば項目名の内容まで適切だとは限りません。「選択する」「入力する」だけでは、何を選び、何を入力するのか分かりません。labelには、フォーム部品の目的が分かる項目名を書きます。

labelを付けないフォーム部品もある

送信ボタンとリセットボタンは、value属性の文字がボタン名になります。画像を使う送信ボタンはalt属性、button要素は要素内の文字が名前になります。これらへ、別のlabel要素を付ける必要はありません。画面に表示しないhiddenの入力欄にもlabelは使いません。

ラジオボタンのように複数の選択肢が一組になる場合、labelは各選択肢の名前を示します。組全体の質問まで一つのlabelで済ませず、必要に応じてfieldset要素とlegend要素でまとめます。

出力されたHTMLと実際の操作を確認する

テンプレートへlabelを書いたあと、ブラウザへ出力されたHTMLを確認します。forの値と同じidを持つフォーム部品が一つだけあるかを照合してください。テキスト入力欄の項目名をクリックすれば、その入力欄へフォーカスが移ります。チェックボックスとラジオボタンでは、項目名をクリックすると選択状態が変わります。

HTMLの照合とクリックの確認は、どちらか一方で済ませません。クリックの確認だけでは、支援技術が項目名をどう取得するかまで分かりません。HTMLの照合だけでは、生成後のページで操作できるかを確かめられません。利用できる環境があれば、キーボードと支援技術でも項目名を確認します。

まず、問い合わせフォームから一つの入力欄を選びます。その項目名をlabel要素にし、forとidを同じ値へそろえ、出力HTMLとクリック時の動作を確認してください。