Checkboxes
- Kim Collins (Unlicensed)
Checkboxes allow a user to select a single value. In groups, checkboxes allow a user to select one or more values from the group.
When to use checkboxes
Use a single checkbox to allow a user to provide confirmation (e.g. “I have read the terms and conditions”).
Use a group of checkboxes when a user can select more than one value from the group. (If a user should select only one value from a group, use a group of radio buttons or a <select> instead.)
Labels
Every checkbox should have a programmatically associated label.
If a user clicks the label, the checkbox is activated. This provides a larger click target than just the small checkbox itself. Larger click targets help users with dexterity, tremor, or other motor-related disabilities, as well as users of mobile devices.
Labels ensure that the correct text is announced to screen reader users when they interact with the checkbox.
Labels can be explicit (i.e. associated with the input using the for attribute), e.g.:
<input id="sb" type="checkbox" value="strawberry"> <label for="sb">Strawberry</label>
Labels can also be implicit (i.e. associated with the input because the <label> element wraps the checkbox control), e.g.:
<label><input id="sb" type="checkbox" value="strawberry">Strawberry</label>
Groups of checkboxes must also have a group legend (generally provided using the <legend> element - see Semantics section) to identify the relationship between the checkboxes in the group.
Behaviour
Single checkboxes:
- When keyboard focus lands on the checkbox, its label and state (checked, not checked) is announced by the screen reader.
- The checkbox can be navigated to via the TAB key.
- The user can toggle the selection of the checkbox by pressing SPACEBAR.
Groups of checkboxes:
- When a user TABs through a form and focus lands on the first checkbox in a group of checkbox elements, a legend for the group of checkboxes is read before the first checkbox label.This group legend conveys the relationship between the checkboxes.
- The checkboxes can be navigated via the TAB or down arrow keys.
- A user can toggle the selection of each checkbox by pressing SPACEBAR.
- A user can select one or more checkboxes in a group.
Semantics
The fieldset method is the standard best practice for coding checkbox groupings. As shown in the example code, checkboxes are wrapped in a <fieldset> element that includes a <legend>. The <legend> serves as the group's label.
<fieldset> <legend>What is your favourite flavour of ice cream?</legends> <input name="icecream" id="sb" type="checkbox" value="strawberry"></input> <label for="sb">strawberry</label> <input name="icecream" id="ch" type="checkbox" value="chocolate"></input> <label for="ch">chocolate</label> <input name="icecream" id="no" type="checkbox" value="lactose"></input> <label id="no">I'm lactose intolerant</label> </fieldset>
If <fieldset> and <legend> markup is not possible for a technical reason, ensure the following:
An element wrapping the list of checkboxes has:
role="group"Either an
aria-labelattribute with a value that labels the group, or anaria-labelledbyattribute referencing an element that labels the groupEach checkbox has:
A
nameattribute (the name attribute should be the same for each checkbox in the group, to indicate the grouping relationship)A label (either implicit or explicit - see Labels section)
Custom Checkboxes
While native HTML is always preferred, if custom checkbox widgets are used they should follow the conventions described in the WAI-ARIA Practices Checkbox design pattern.