Group related form fields with fieldset and legend
A fieldset with a legend ties a group of controls to the question they answer. W3C lists it as sufficient for 1.3.1 Info and Relationships, and on its own for 3.3.2 Labels or Instructions. The case it exists for is radio buttons and checkboxes, where individual labels like Yes and No mean nothing without the question above them. It is conditional, though, and the condition is easy to miss. A group whose individual labels already describe each control fully does not need a fieldset to pass. Two markup rules go with it. The legend has to be the first element inside the fieldset, and nesting fieldsets inside fieldsets confuses more than it helps.
How we find it in an audit
Scanners catch a fieldset with no legend. The bigger failure is the radio group with no fieldset at all, which no tool can see, because a styled div holding a bold question looks identical on screen. So we tab into every radio group and every checkbox group and listen for whether the question travels with the options.
How affected users experience it
Tab into an ungrouped radio button and you hear Yes, radio button, one of two. Yes to what is on screen three lines up, attached to nothing, and somebody moving field by field never hears it. With a legend the same control announces as Include VAT in prices, Yes, radio button, and the question rides along with every option in the group.
Passes vs. fails
Passes
<fieldset>
<legend>Include VAT in prices?</legend>
<label><input type="radio" name="vat" value="y"> Yes</label>
<label><input type="radio" name="vat" value="n"> No</label>
</fieldset>Fails
<p><strong>Include VAT in prices?</strong></p>
<label><input type="radio" name="vat" value="y"> Yes</label>
<label><input type="radio" name="vat" value="n"> No</label>How this gets tested
The W3C publishes test rules that define what a checker looks for here.
- ARIA attribute is defined in WAI-ARIAA tool can check this
- ARIA state or property has valid valueA tool can check this
- Element with role attribute has required states and propertiesA tool can check this
- Form field has non-empty accessible nameA tool can check this
- Headers attribute specified on a cell refers to cells in the same table elementA tool can check this
- Role attribute has valid valueA tool can check this
- ARIA global properties not used where prohibitedA tool can check this
- ARIA required context roleA tool can check this
- ARIA required owned elementsA tool can check this
- ARIA state or property is permittedA tool can check this
- Table header cell has assigned cellsA tool can check this
Other ways to satisfy this rule
52 guides on this site are filed under 1.3.1 Info and Relationships. W3C lists this one as sufficient for that rule when used for making information and relationships conveyed through presentation programmatically determinable, so the condition is part of the test rather than a footnote to it.
- ARIA11sufficientAdd landmarks so users can skip around
- ARIA12sufficientUse role=heading when h1-h6 is impossible
- ARIA13sufficientName repeated landmarks so they are distinguishable
- ARIA16sufficientName controls from visible text with aria-labelledby
- ARIA17sufficientGroup related form fields with ARIA roles
- ARIA20sufficientMark leftover page areas with role=region
This guide is our interpretation of W3C technique H71: Providing a description for groups of form controls using fieldset and legend elements. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.