Skip to main content
Grouping checkboxes

Grouping checkboxes allows visitors who utilize screen readers to know the options are all part of one form field

Updated over a week ago

There are currently three methods to group checkboxes that allow web visitors to know that the options are all a part of one form field.

  1. Utilize a fieldset and legend element

  2. Utilize ARIA groups role="group" and aria-label or aria-labelledby

  3. Utilize aria-labelledby attribute that points to the same element for every checkbox in the group

Examples of all three approaches are below. Option 1 is the most utilized. The additional options may allow for more customizable styling.

Option 1: fieldset and legend

<fieldset>
<legend>Select one or more departments</legend>
<input type="checkbox" name="dept1" id="business" value="business"> <label for="dept1">Business</label>
<input type="checkbox" name="dept2" id="computing" value="computing"> <label for="dept2">Computing</label>
<input type="checkbox" name="dept3" id="design" value="design"> <label for="dept3">Design</label>
</fieldset>


Option 2: ARIA groups

<div role="group" aria-label="Select one or more departments">
<div>Select one or more departments</div>
<input type="checkbox" name="dept1" id="business" value="business"> <label for="dept1">Business</label>
<input type="checkbox" name="dept2" id="computing" value="computing"> <label for="dept2">Computing</label>
<input type="checkbox" name="dept3" id="design" value="design"> <label for="dept3">Design</label>
</div>



Option 3: aria-labelledby attribute

<div id="dept-field">Select one or more departments</div>

<input type="checkbox" aria-labelledby="dept-field dept1" name="dept1" id="business" value="business"> <label id="dept1" for="dept1">Business</label>
<input type="checkbox" aria-labelledby="dept-field dept2" name="dept2" id="computing" value="computing"> <label id="dept2" for="dept2">Computing</label>
<input type="checkbox" aria-labelledby="dept-field dept3" name="dept3" id="design" value="design"> <label id="dept3" for="dept3">Design</label>

Did this answer your question?