Legend Outside Its Group
ID |
html.legend_in_fieldset |
Severity |
high |
Remediation Complexity |
trivial |
Remediation Risk |
low |
Remediation Effort |
low |
Resource |
Reliability |
Language |
Html |
Tags |
best-practice, reliability |
Description
Reports a <legend> element that is not a direct child of a <fieldset> or an <optgroup>.
The distinction is direct child rather than descendant on purpose: a <legend> nested one level
down — inside a <div> added for styling, say — still sits within its fieldset in the document,
and is exactly the case this rule exists to catch.
Rationale
<legend> has no meaning of its own. It exists to caption the group its parent opens, and the
accessible name a screen reader announces for every control inside a fieldset is taken from that
fieldset’s first <legend> child.
Wrapping the legend for layout therefore removes the caption without changing anything visible:
the text still renders, the border still draws, and the group silently stops being announced. A
<legend> with no group parent at all is worse — it captions nothing and degrades to ordinary
inline text, so the styling it was written for does not apply either.
<!-- The div breaks the caption: the fieldset no longer has a legend child -->
<fieldset>
<div class="row"><legend>Contact details</legend></div>
<input name="email" type="email">
</fieldset>
<!-- No group at all: this legend captions nothing -->
<div class="panel"><legend>Contact details</legend></div>Remediation
Make the <legend> the first child of its <fieldset> (or <optgroup>) and move the styling onto
the legend itself, or onto a wrapper inside it.
<fieldset>
<legend class="row">Contact details</legend>
<input name="email" type="email">
</fieldset>When the element was never meant to caption a group, use a heading or a <span> instead — those
carry the semantics the markup actually needs.
Two shapes are deliberately left alone, because reporting them would be a false positive:
-
a namespaced element such as
<ui:legend>, which is a template library’s own tag rather than the HTML element, and a namespaced parent such as<h:fieldset>, which does render as a fieldset; -
a partial whose entire content is the
<legend>, since the enclosing group belongs to the host page that inlines it.