Learn how to use the <legend> element to provide accessible captions for grouped form controls, ensuring screen readers announce the purpose of each section.
What it is
The <legend> element defines a caption for its parent <fieldset>. It must be the first child of the fieldset. Semantically, it groups related form controls (like radio buttons or checkboxes) and provides a label for that group. For assistive technologies, this context is crucial: without a legend, a user might hear "Radio button 1" but not know what question they are answering.
Why it matters
- Screen Reader Context: When a user navigates into a fieldset, most screen readers announce the legend text before reading individual inputs, providing immediate orientation.
- Visual Clarity: Browsers typically render legends with a border around the fieldset, visually grouping related fields together.
- Semantic Structure: It creates a logical hierarchy in the DOM, helping users understand complex forms with multiple sections.
- Compliance: Using legends correctly helps meet WCAG guidelines for identifying input purposes and grouping controls.
Syntax or steps
- Create a
<fieldset>element to wrap your related inputs. - Add a
<legend>as the very first child inside the fieldset. - Place your form controls (inputs, labels) after the legend within the same fieldset.
Example
<form>
<fieldset>
<legend>Preferred Contact Method</legend>
<input type="radio" id="email" name="contact" value="email">
<label for="email">Email</label><br>
<input type="radio" id="phone" name="contact" value="phone">
<label for="phone">Phone</label>
</fieldset>
</form>Part-by-part explanation:
<fieldset>: Groups the two radio buttons logically.<legend>Preferred Contact Method</legend>: Provides the title for the group. A screen reader will say "Preferred Contact Method, Radio Group" when entering this area.<input>and<label>: Standard form elements linked viaidandforattributes.
Common mistakes
- Placing the legend later: The
<legend>must be the first child of the<fieldset>. If placed elsewhere, browsers may ignore it or display it incorrectly. - Using divs instead: Developers often use
<div>with CSS borders for visual grouping. This lacks semantic meaning and does not trigger screen reader announcements like a fieldset/legend pair does. - Empty legends: Avoid empty
<legend>tags just for styling. If you need visual grouping without a caption, consider using CSS on the fieldset directly, but ensure accessibility isn't compromised. - Nesting legends: Do not place other block-level elements (like headings) inside the legend. Keep the content simple and textual.
When to use it
Use <legend> whenever you have a set of related inputs that answer a single question or belong to one category. Compare it with standard labels below:
| Element | Scope | Best For |
|---|---|---|
<label> | Single Input | Naming one specific field (e.g., "Name"). |
<legend> | Group of Inputs | Naming a collection of related fields (e.g., "Gender Options"). |
Practice
Guided Exercise: Create a form with a fieldset for "Shipping Address." Include inputs for Street, City, and Zip Code. Add a legend titled "Address Details."
Challenge: Modify the previous exercise by adding a second fieldset for "Billing Address" with its own legend. Ensure both legends are distinct and properly nested.
Hint: Check your browser's developer tools to see if the legend renders with the default border style, confirming correct placement.
Quick check
Question: Where must the <legend> element be placed within a <fieldset>?
Answer: It must be the first child element of the <fieldset>.
Summary
The <legend> element is essential for accessible form design, providing context for grouped inputs to assistive technologies. Always pair it with a <fieldset> and ensure it is the first child to maintain semantic integrity and visual consistency.