Skip to main content

Grouping Checkboxes in Forms

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

Updated over 2 weeks ago

In this Article:

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.

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

Option 1: Utilize a fieldset and legend element

<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: Utilize ARIA groups role="group" and aria-label or aria-labelledby

<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: Utilize aria-labelledby attribute

Using aria-labelledby is accomplished by pointing the attribute to the same element for every checkbox in the group.

<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>

More information on Form Element Labels: The Basics and Form Element Label Issues: Correcting.


Resources

Learn More with WCAG

If you have questions, please contact our DubBot Support team via email at help@dubbot.com or via the blue chat bubble in the lower right corner of your screen. We are here to help!

Did this answer your question?