Checkbox
Checkbox
Easy to use for everyone
When interacting with checkboxes on a keyboard, the tab key moves the focus to each checkbox within a checklist. The checkbox is then checked using the space key when the field is focused.
When child fields are displayed beneath checkboxes, the field acts as the child of the checkbox. The field should be included within the focus order so that it's focused directly after the checkbox it belongs to.
When a child field is dynamically displayed after checking a checkbox, then it should be announced as required due to the user’s selection.
For Assistive Technology
The label of a checkbox group is announced by a screen reader before the checkbox options are announced.
Screen readers will read out the label of the checkbox as well as whether it's checked or not. Checking the checkbox will result in it being read out again.
Based on
The checkbox component has been based on the following resources:
-
Accessible Checkbox , A11y Matters, accessed March 2022. -
Input type = checkbox , MDN web docs, accessed March 2022. -
ARIA Checkbox role , MDN Web docs, accessed March 2022. -
Trouble tabbing to tabs and cheeky checking checkboxes , Scott O’hara, accessed March 2022.
Testing
We’ve tested this component against WCAG 2.2 Level AA. It’s been tested with NVDA and VoiceOver, and several different users with different interaction methods.