Grouping controls — fieldset and legend
From W3C:
The FIELDSET element allows authors to group thematically related controls and labels ... facilitating tabbing navigation for visual user agents and speech navigation for speech-oriented user agents. The LEGEND element allows authors to assign a caption to a FIELDSET.
When you come across a set of radio buttons that are properly labeled does a screen reader user know the purpose of these controls?
There is a way to logically and visually group form controls (radio buttons, check boxes, etc.)
- Use <fieldset> and <legend>
- <fieldset> visually and logically group the controls
- <legend> logically 'labels' the fieldset
- most screen readers will read the 'legend' before each control in the fieldset
- keep the legend short
The Form
The HTML
<form action="mailto:someone@knowbility.org">
<fieldset>
<legend>Empty my bank account:</legend>
<input name="radio1" type="radio" value="yes" id="radiobutton1" />
<label for="radiobutton1">Yes</label>
<br />
<input name="radio1" type="radio" value="no" id="radio1" />
<label for="radio1">No</label>
</fieldset>
</form>