Accessible form structure
Group related controls
Use fieldset and legend to give checkbox and radio groups a question that remains available to screen-reader users.
8 minute lesson
Individual labels name individual controls. A related set of controls also needs a group name.
Use fieldset and legend for a question with several choices:
<fieldset>
<legend>Preferred contact method</legend>
<label>
<input name="contact" type="radio" value="email">
Email
</label>
<label>
<input name="contact" type="radio" value="phone">
Phone
</label>
</fieldset>
The legend provides the question. Each label provides an answer. A screen reader can announce both when someone moves through the radio buttons.
Visual proximity alone does not communicate this relationship. A row of radio buttons may look grouped on screen while sounding like unrelated choices.
Use a fieldset for meaningful groups, not as a wrapper around every form section. Contact details with independent text fields can often use a heading and normal labels. A set of radios or related checkboxes usually benefits from a legend.
If the whole group is invalid, place the error near the legend and connect it to the fieldset when needed. Do not repeat the same error after every option.
Navigate the group with a keyboard. Tab should enter the radio group, and arrow keys should move between its options.
Lesson completed