Use the fieldset and legend elements to group HTML form controls
The fieldset
and legend
elements, which should always be used together, allow you to create and name groups of related input fields in HTML forms. By doing this you help users understand how the input fields are related.
How the grouping is conveyed to the user depends mainly on whether the user is sighted or not. Most graphical web browsers draw a border around fieldset
elements and render the legend
element on top of the border, while screen readers may speak the legend text at the start of each fieldset or before each form control within a fieldset.
Since some screen readers will announce the legend text before each form control, it is important to keep the legend text concise and consider how the legend and label texts will work when put together.
Here is a simple example of a fieldset
element used to group related radio buttons:
<fieldset>
<legend>Favourite colour</legend>
<input type="radio" name="fav-col" id="fav-col-1" value="red">
<label for="fav-col-1">Red</label>
<input type="radio" name="fav-col" id="fav-col-2" value="green">
<label for="fav-col-2">Green</label>
<input type="radio" name="fav-col" id="fav-col-3" value="blue">
<label for="fav-col-3">Blue</label>
</fieldset>
In summary: Do not use the fieldset
and legend
elements if all you want to do is create a graphical border around some content on a page. Only use them to group logically related form controls, always use both elements together, and keep legend texts short.
Further reading:
- Fieldsets, Legends and Screen Readers
- Too much accessibility - FIELDSET LEGENDS
- WCAG 2.0, H71: Providing a description for groups of form controls using fieldset and legend elements
This post is a Quick Tip. Background info is available in Quick Tips for web developers and web designers.
- Previous post: Using an XML declaration triggers Quirks mode in IE 6
- Next post: Hiding with CSS: Problems and solutions