フォームで関連する入力要素をグループ化する要素の組み合わせは？

解説

正解は<fieldset>と<legend>です。<fieldset>はフォーム内の関連する入力要素をひとまとめにし、<legend>はそのグループにタイトルをつける要素です。ブラウザはデフォルトでグループの周囲に枠線を描画し、<legend>のテキストを枠線上に表示します。他の選択肢について補足します。<heading>や<group>はHTMLに存在しない要素です。<section>はページ構造のセクション分けに使うもので、フォーム入力のグループ化とは用途が異なります。<div>と<label>の組み合わせで見た目上のグループ化はできますが、スクリーンリーダーなどの支援技術には「このラジオボタン群は1つのグループである」という情報が伝わりません。<fieldset>が本当に必要になる場面<fieldset>の効果が最もわかりやすいのは、ラジオボタンやチェックボックスが複数グループ並ぶフォームです。たとえば「サイズ」と「色」をそれぞれラジオボタンで選ばせる場合を考えます。<fieldset> <legend>サイズ</legend> <label><input type='radio' name='size' value='s'> S</label> <label><input type='radio' name='size' value='m'> M</label> </fieldset> <fieldset> <legend>色</legend> <label><input type='radio' name='color' value='red'> 赤</label> <label><input type='radio' name='color' value='blue'> 青</label> </fieldset>この構造なら、スクリーンリーダーは「サイズ、グループ」「色、グループ」と読み上げ、各ラジオボタンがどのグループに属するか明確に伝えられます。<div>で囲んだだけでは、視覚的に分かれていても支援技術にはフラットな入力の羅列にしか見えません。<div>+<label>ではなぜ不十分なのか<label>は1つの入力要素と1つのラベルを紐づける要素です。「このテキストはこの入力欄の説明である」という1対1の関係を示します。一方、<fieldset>+<legend>は複数の入力要素をまとめて1つのグループとして名前をつけるものです。役割がそもそも違います。WAI-ARIA（ウェブアクセシビリティの仕様）の観点でいうと、<fieldset>は暗黙的にrole='group'を持ち、<legend>がそのグループのアクセシブルネームになります。<div>にはこのような暗黙のロールがないため、支援技術がグループの境界を認識できません。デフォルトの枠線を消すCSS<fieldset>のデフォルトスタイルは枠線つきで、デザインに合わないことも多いです。その場合はCSSでリセットできます。fieldset { border: none; padding: 0; margin: 0; } legend { font-weight: bold; margin-bottom: 0.5rem; }見た目を消してもHTMLの意味（セマンティクス）は保持されるため、アクセシビリティ上の恩恵はそのまま残ります。「見た目が不要だから<div>でいい」とはならない点が重要です。