【HTML Living Standard】legend要素の使い方

legendオブジェクトは、HTMLのfieldset要素でグループ化されたフォームコントロールや関連コンテンツの説明文（キャプション）を表すオブジェクトです。この要素は、fieldset要素がどのような種類の情報をまとめて提供しているのかを、ウェブページのユーザーに対して明確に伝えるために使用されます。

具体的には、ラジオボタンのグループやチェックボックスの集合、あるいは関連する入力フィールド群など、意味的に関連付けられた複数のフォーム要素をfieldsetで囲んだ際に、そのグループ全体が何を意味するのかをlegend要素で記述します。例えば、氏名、住所、電話番号といった個人情報を入力する複数のフィールドをfieldsetでまとめる場合、legendには「お客様情報」といった見出しを提供できます。

legend要素は、必ずfieldset要素の最初の子要素として配置しなければなりません。また、一つのfieldset要素内に記述できるlegend要素は一つだけです。これにより、各fieldsetが持つ目的や内容を簡潔かつ正確に示し、ユーザーがフォームの構造を直感的に理解できるよう支援します。

さらに、スクリーンリーダーなどの支援技術を利用するユーザーにとっても、legend要素は重要な役割を果たします。グループ化されたフォーム要素の文脈を音声で伝えることで、視覚に頼らないユーザーもフォームの内容を正確に把握し、操作できるようになるため、ウェブサイトのアクセシビリティを大きく向上させます。ユーザーフレンドリーで、誰もが使いやすいウェブフォームを設計する上で、legend要素の適切な利用は不可欠です。

Copy
1<fieldset>
2  <legend>セクションのタイトル</legend>
3  <!-- ここにフォーム要素などのコンテンツを配置します -->
4</fieldset>

引数なし

引数はありません

戻り値なし

戻り値はありません