サイト制作
fieldsetとlegendは何のため？フォームの「質問」と「選択肢」をまとめる
2026-11-01
この記事には広告・アフィリエイトリンクが含まれます。
フォームを枠で囲むためだけの要素ではありません。fieldsetとlegendで関連する入力欄をまとめ、質問の意味が伝わるようにする考え方を紹介します。
ひとまとまりの質問に名前を付ける
「連絡方法はどれですか」という質問に、電話・メールのラジオボタンを置く場合を考えます。各選択肢のlabelだけでは、何を選ぶ質問なのかが離れてしまうことがあります。関連する入力をfieldsetでまとめ、そのまとまりの説明をlegendで付けます。legendはfieldsetの先頭に置きます。枠線を見せるかどうかは見た目の調整であり、入力の関係を表す役割とは別です。
グループ名があっても個々のラベルは残す
legendに「連絡方法」と書いたからといって、「電話」「メール」のlabelを省略するわけではありません。まとまりの名前と、個々の選択肢の名前の両方が必要です。住所のように関連する複数の入力欄にもグループ化を検討できます。ただしページ全体を一つのfieldsetで囲めば分かりやすくなるとは限りません。入力する人が、同じ問いへの回答として理解できる範囲でまとめます。
短い質問文で操作を確かめる
W3Cのフォーム教材は、関連するコントロールを意味のあるまとまりに分ける方法を案内しています。legendは長い注意書きの置き場にせず、グループを識別できる短い言葉にすると扱いやすくなります。補足説明が必要なら、質問名と説明の役割を分けて設計します。仕上げにキーボードで選択できるか、ラベルを押して選べるかを確認します。見た目の整列に加えて、読み上げ環境で質問と選択肢の関係が伝わるかも確認すると、修正する場所が見つけやすくなります。
