In this Article:
Option 1: Utilize a fieldset and legend element
Option 3: Utilize aria-labelledby attribute that points to the same element for every checkbox in the group
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.
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!