The <fieldset> Element
As defined in the HTML Living Standard, the <fieldset> element represents a set of form controls optionally grouped under a common name.
<fieldset>
<legend>Subscription Options</legend>
<input type="checkbox" id="news">
<label for="news">Newsletter</label>
</fieldset>
View HTML Living Standard: The fieldset element
Relationship with <legend>
The <legend> element is the first child of a <fieldset> and provides a caption or title for the group.
- Group Context: Without a legend, the relationship between the controls in the fieldset is not programmatically defined.
- Identification: Screen readers use the legend as the "label" for the entire group.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
For groups of related controls (like radio buttons or checkboxes), a fieldset and legend are essential. When a screen reader user tabs into a control inside a fieldset, the browser announces the legend text first. This provides the necessary context (e.g., "Preferred Contact Method, Radio Button, Email") that would otherwise be missing if the controls were just wrapped in a generic div.
Understand SC 1.3.1: Info and RelationshipsThe disabled Attribute
A unique feature of the <fieldset> element is its ability to disable an entire group of controls at once.
- Bulk Disabling: Adding the
disabledattribute to the fieldset will automatically disable all descendant form controls (inputs, buttons, etc.). - Exception: Controls inside the first
<legend>of the fieldset are not disabled by this attribute.
A11y Tip: Form Labels
While the <legend> labels the group, each individual control still needs its own <label> to satisfy WCAG SC 3.3.2 (Labels or Instructions). The fieldset/legend combination provides the category, while the label provides the specific value.