fieldsetとlegendはラジオボタンの質問と選択肢を一組にする

フォームで一つの質問に複数の選択肢を並べるなら、関連する入力欄をfieldset要素で囲み、質問を最初のlegend要素へ書きます。各選択肢には、それぞれのlabel要素を付けます。

legendは組全体の名前、labelは一つの入力欄の名前です。また、ラジオボタンのname属性は、どの選択肢を同じ一組として扱うかを決めます。この三つは役割が違うため、どれか一つで代用しません。

legendへ質問を書きlabelへ各選択肢を書く

問い合わせ方法を一つ選ぶフォームは、次のように組み立てます。このコードは要素の関係を示す仮例です。

<fieldset>
  <legend>希望する連絡方法</legend>

  <input type="radio" name="contact-method"
         id="contact-email" value="email">
  <label for="contact-email">メール</label>

  <input type="radio" name="contact-method"
         id="contact-phone" value="phone">
  <label for="contact-phone">電話</label>
</fieldset>

「希望する連絡方法」は二つの選択肢に共通する質問なので、legendへ置きます。「メール」と「電話」は個別の選択肢なので、それぞれをlabelへ置きます。

HTML5のフォーム仕様は、fieldsetを、共通の名前の下へフォーム部品をまとめる要素としています。その組の名前は、fieldsetの最初の子要素であるlegendが示します。

nameは選択の一組を作りfieldsetは意味の一組を示す

二つのラジオボタンへ同じname="contact-method"を指定すると、同じ質問に対する一組の選択肢として扱えます。片方を選んだあとで他方を選べば、先の選択は外れます。送信時には、選ばれた入力欄のvalueがcontact-methodの値になります。

一方、fieldsetとlegendは、その入力欄が何についての組なのかをHTMLの構造で示します。見た目を近くに並べ、同じnameを付けただけでは、質問文と選択肢の関係を表せません。

役割を表にすると、次のようになります。

idはページ内で重複させません。ラジオボタンのnameは共通にし、idは一つずつ変えます。labelのforには、対応する入力欄のidを書きます。

labelだけでは質問全体を示せないことがある

個別のlabelが「メール」「電話」だけなら、それだけを読んでも、何を選ぶ二択なのか分かりません。「希望する連絡方法」という質問があって、初めて選択肢の意味が決まります。

WCAG 2.0の実装方法H71は、関連するフォーム部品をfieldsetで囲み、最初のlegendで組の説明を与える方法を示しています。とくに、一つの項目へ値を送るラジオボタンやチェックボックスでは、各選択肢のlabelだけでは組全体の説明が足りない場合があります。

ただし、すべての入力欄を機械的にfieldsetへ入れる必要はありません。組全体の説明がなければ個別のlabelだけでは意味を判断できない箇所、または大きなフォームの中で共通見出しが必要な箇所に使います。

チェックボックスでも質問と選択肢を分ける

複数回答を許すチェックボックスでも、考え方は同じです。

<fieldset>
  <legend>希望する資料</legend>

  <input type="checkbox" name="document"
         id="document-price" value="price">
  <label for="document-price">料金表</label>

  <input type="checkbox" name="document"
         id="document-flow" value="flow">
  <label for="document-flow">制作の流れ</label>
</fieldset>

この例も説明用です。legendが質問を示し、二つのlabelが回答候補を示します。ラジオボタンは一つを選ぶ用途、チェックボックスは複数を選べる用途なので、選択方法まで同じにはしません。

住所、配送先、請求先のように、複数のテキスト入力欄へ共通の説明が必要な場合もfieldsetを使えます。ただし、入れ子を重ねるほど組の境界は追いにくくなります。まず、利用者が一つの質問または一つの情報群として理解する範囲を決めます。

枠線を消すためにHTMLの組まで外さない

ブラウザーはfieldsetへ枠線を表示することがあります。デザインに合わない場合は、HTMLからfieldsetとlegendを外すのではなく、CSSで表示を調整します。

.contact-method {
  border: 0;
  margin: 0;
  padding: 0;
}

class="contact-method"を付けたfieldsetへ適用する仮例です。枠線を消しても、質問文と選択肢が目で区別できる余白や文字の強弱は残します。HTMLの意味と、見た目の枠線を別の問題として扱います。

fieldsetをdisabledにすると、原則として、その中のフォーム部品も無効になります。見た目をまとめる目的だけでdisabledを付けると、入力も送信もできなくなるため、装飾用の属性として使ってはいけません。

一つの選択肢群から関係を確認する

最初に、ラジオボタンかチェックボックスが並ぶ箇所を一つ選びます。次に、組全体の質問、各選択肢の名前、共通にするname、一つずつ変えるidを分けます。その関係をHTMLへ移したあとで、CSSの枠線や余白を調整します。

制作を委託する場合も、完成画面だけでなく、fieldset、legend、各入力欄のnameとid、labelのforを含むHTMLを受け取ります。質問文を変えたり選択肢を追加したりするときに、どの文字と入力欄が一組なのかを確認できます。