<legend>要素

Technical Summary

Definition / Contexts

legendは、任意の場所に置いて見出しとして使う要素ではありません。仕様上の意味を得る親と位置が決まっており、通常のページ見出しにはh1〜h6などを使い分けます。

Fieldset caption

<fieldset>
  <legend>連絡方法</legend>
  <label><input type="radio" name="contact" value="email"> メール</label>
  <label><input type="radio" name="contact" value="phone"> 電話</label>
</fieldset>

この構造では、legendがグループ全体のcaptionを担当し、各labelが個別のcontrolの名前を担当します。legendだけで個別のradio buttonのlabelが完成するわけではありません。

Position and content model

conformingなfieldsetでは、legendは最初の子です。legendの前に説明用のdivやpを置くと、仕様上の位置条件を満たしません。

<!-- Conforming structure -->
<fieldset>
  <legend>配送方法</legend>
  <label><input type="radio" name="delivery" value="mail"> 郵送</label>
</fieldset>

<!-- The legend is not the first child -->
<fieldset>
  <p>配送方法を選びます。</p>
  <legend>配送方法</legend>
</fieldset>

親がfieldsetのときは、phrasing contentに加えてheading contentを含められます。ただし、グループのcaptionと文書全体の見出しは別の責務なので、見出しを含めるかどうかは情報設計と支援技術での提示を確認して決めます。

Optgroup boundary

<!-- カスタマイズ可能なselectの文脈 -->
<select name="standard">
  <optgroup>
    <legend>仕様書</legend>
    <option value="html">HTML Standard</option>
    <option value="dom">DOM Standard</option>
  </optgroup>
</select>

現行HTML Standardでは、カスタマイズ可能なselect内のoptgroupの最初の子にもlegendを置けます。この場合、legendのテキストがoptionグループのlabelになります。従来から広く使われる通常のselectでは、optgroup label属性を使う構文もあります。カスタマイズされたselectの描画と通常のselectの実装を同一視しないことが重要です。

Disabled propagation boundary

<fieldset disabled>
  <legend>現在は利用できません</legend>
  <label><input name="plan" value="basic"> ベーシック</label>
</fieldset>

fieldset[disabled]は、最初のlegendの子孫を除き、子孫のフォームcontrolをdisabledとして扱います。例外はlegend要素そのものを「有効なcontrol」にする規則ではなく、最初のlegendの中にあるフォームcontrolの子孫境界です。

DOM Interface

HTMLLegendElementのform IDL属性は、legendの親がfieldsetなら、そのfieldsetのform ownerと同じ値を返します。親がfieldsetでなければnullです。

const legend = document.querySelector('fieldset > legend');

legend.form;
// Parent fieldset's form owner, or null

legend instanceof HTMLLegendElement;
// true

Rendering and accessibility

ブラウザーには、fieldsetの枠と最初のlegendを関係付けて描画する特別なrendering規則があります。CSSで枠線や文字の位置を調整すると、見た目の差が生じることがありますが、疑似要素や一般のテキストでlegendの意味を置き換えることはできません。

HTML-AAMでは、legend自体に対応するARIA roleはなく、fieldsetとのlabel関係に使われます。fieldset側はgroup mappingに従い、最初のrendered legendがグループ名に関係します。legendをアクセシビリティツリーから隠す場合、そのlegendは親fieldsetのaccessible nameを提供しません。

Fact / Evidence（主張 / 根拠）

仕様上の主張と実装観測を分離し、親要素、位置、適用条件、確認状態を記録します。

Evidence

1. HTML Standard: The legend element — 意味、contexts、content model、属性、DOM interface
2. HTML Standard: The optgroup element — legendによるoption group labelとlabel属性の関係
3. HTML Standard: Enabling and disabling form controls — 最初のlegendを含むdisabled境界
4. HTML Accessibility API Mappings: legend — legendのroleとfieldsetとのlabel関係
5. HTML Accessibility API Mappings: fieldset — group mappingと最初のrendered legend

Implementation Evidence

仕様上の主張とは別に、ブラウザー実装・WPT・アクセシビリティ観測を記録します。未実施の項目は確認済みとは扱いません。

実測fixture / 環境: 通常のfieldset、最初のlegend、legend内外のcontrol、disabled fieldset、form ownerを持つfieldsetを用意し、DOMとフォーム関連APIを実測しました。Chrome 152.0.0.0（HeadlessChrome / Windows NT 10.0）で2026-09-13に実行しています。描画、Accessibility tree、optgroup内legend、カスタマイズされたselectは未実施です。

WPTの対応付けにはWPTリポジトリ、アクセシビリティの基準にはHTML-AAMを参照します。ここで挙げた関連テストは、legendのすべての描画・AAM・optgroup挙動を検証済みとするものではありません。

Coverage / Open Issues

• 確認済みfieldset caption、optgroup label、親と位置、content model、HTMLLegendElement.formの仕様上の入口
• 確認済みdisabled fieldsetにおける最初のlegendの子孫例外とHTML-AAMのlegend / fieldset mapping
• 未完了複数ブラウザーにおけるlegendの描画、CSS条件、legend内control、nested fieldsetの比較
• 未完了optgroup内legendを含むcustomizable selectの実装比較、WPT実行結果、platform API、支援技術の読み上げ

このページは初期Coverageです。legend要素の全仕様、すべてのselect実装、すべてのブラウザーと支援技術における結果の検証完了を主張するものではありません。

Related surface

初心者向けのグループ名と使い方はYugienのlegend要素ページを参照してください。グループ全体はfieldset要素、フォームとの関係はform要素、optionグループのlabelとdisabled境界はoptgroup要素、optionグループ全体の選択モデルはselect要素、個別controlの名前はlabel要素でも確認できます。