An order form groups together several related fields: street, city, postal code, all gathered under one heading, "Shipping address". Wrapping those fields in a plain block with a visual title above works on screen, but a user navigating by keyboard or with a screen reader loses that title the moment they leave the first field of the group.
<legend> solves exactly that problem: it is the title of a group of fields that stays attached to every field in the group, not only the first one.
Definition
legend is the title of a group of form fields. It only makes sense inside a <fieldset>, the tag that delimits the group, and it must absolutely be its very first direct child: before the first field, before any text, before any other element.
Placed anywhere else inside the fieldset, even right after the first field, legend loses its validity and neither browsers nor assistive technology associate it correctly with the group anymore. This is not a matter of style but a strict rule of HTML.
A legend that is not the very first child of the fieldset, for instance preceded by an introductory paragraph, is no longer recognised as the group's title by assistive technology. Any accompanying text should sit after legend, never before it.
What a screen reader does with it
What sets legend apart from a plain visual title placed above the group comes down to how screen readers use it: its content is announced before every field of the group, not just once when passing over the whole group. A user navigating field by field with the keyboard hears "Shipping address" again before reaching the "Street" field, then again before reaching "City", without ever needing to scroll back up to the top of the form to remember which group they are in.
In the same way a table carries a title through <caption>, a group of fields carries its own through legend: both tags give an accessible heading to a container, each within its own context.
A concrete example: a "Shipping address" group
<fieldset>
<legend>Shipping address</legend>
<label for="street">Street</label>
<input id="street" name="street" type="text">
<label for="city">City</label>
<input id="city" name="city" type="text">
<label for="zip">Postal code</label>
<input id="zip" name="zip" type="text">
</fieldset>A second group, dedicated to the delivery option, could for instance be followed by an <output> that displays the computed cost once an option is picked: the fieldset delimits what belongs to the choice, output displays what results from it.
Comparing grouping methods
legend is not the only way to title a group of fields, but it is the only one that repeats that heading before every field for a screen reader, rather than reading it once in passing.
| Method | Announced before every field in the group | Container required |
|---|---|---|
legend inside fieldset | Yes | fieldset |
Visual title alone (h3 or strong) | No, read once | None in particular |
aria-labelledby on a group | Yes | A container with role="group" |
Best practices
Reserve fieldset and legend for groups that gather several genuinely related fields: an address, a payment method, a date range. A form with a single field needs neither fieldset nor legend, a plain label is enough. Keep the legend text short, a few words at most: any longer accompanying text belongs in a paragraph right after it, still inside the fieldset.
Frequently asked questions
Can legend be styled like any other text, its font or colour changed?
Yes, entirely. Its default appearance, often bold and overlapping the fieldset's border, can be removed or fully replaced with CSS. Its accessibility behaviour stays intact regardless of the style applied, since it depends on legend's position in the document, not on how it renders visually.
Does a whole form need a fieldset, or only sub-groups within it?
Reserve fieldset for sub-groups of related fields. Wrapping an entire form in a single fieldset with a single legend adds nothing: the form tag already delimits the whole form. fieldset earns its place once there are at least two distinct groups worth setting apart from each other.
What happens if legend is left out of a fieldset?
The fieldset still displays visually, often with a plain outline. But without legend, a screen reader no longer announces any heading for the group: only the visual outline remains, with no grouping information carried over to anyone who cannot see that outline. It is best to never use a fieldset without its legend.