Description: When a form contains elements that are logically connected to each other it is necessary to group them.
Context: Screen readers require additional assistance to group related content together correctly, especially for inputs.
<label>
Announcement Interests
</label>
<label>
<input type="checkbox" value="b522a60436" checked="">
<span>Music @ Mānoa News</span>
</label>
<label>
<input type="checkbox" value="37fdc2e2ce" checked="">
<span>Concert Announcements</span>
</label>
How to fix it: The form contains check boxes and/or radio buttons that are not grouped and named, using a ‘fieldset’ with a descriptive ‘legend’ or the WAI-ARIA attribute role=”group” (for check boxes) or role=”radiogroup” (for radio buttons) with a descriptive ‘aria-labelledby’ or ‘aria-label’. (There might be several groups of form elements on the page that needs to be grouped).
<div role="group" aria-labelledby="announcementLabel">
<label id="announcementLabel">
Announcement Interests
</label>
<label>
<input type="checkbox" value="b522a60436" checked="">
<span>Music @ Mānoa News</span>
</label>
<label>
<input type="checkbox" value="37fdc2e2ce" checked="">
<span>Concert Announcements</span>
</label>
</div>