Checkbox
How it works
The Checkbox component is used to provide a list of options where the user can select multiple options, including all or none. A checkbox control has three possible states indicated by the value of its aria-checked attribute, “true” when selected, “false” when unselected and “mixed” when in the indeterminate state. The indeterminate state comes into play when the checkbox contains a sublist of selections, some of which are selected, and some unselected.
The Tab key is used to move focus to each checkbox. Checkboxes identified as disabled are ignored in the tab order. The Space key is used to select and deselect each checkbox when the checkbox has focus. When the checkbox is selected the ARIA state is set to aria-checked="true" and when it is deselected aria-checked="false". An indeterminable checkbox has an ARIA state that is set to aria-checked="mixed" until it is selected or deselected by the user. Fieldset and Legend elements are used for labeling the checkbox group.
Accessibility considerations
This component has been validated to meet the WCAG 2.0 AA and Section 508 accessibility guidelines, however changes made by the content owner can affect accessibility compliance. Be sure to review and follow the guidance in this section when updating or adding new content to this component.
- Checkboxes must have a clear and concise label.
- Users should be warned if selecting a checkbox will cause a change in context.
- If the checkbox is a required field include the aria-required property and indicate that it is a required field and use the validation message for input errors.
Resources
Helpful resources for creating customized accessible implementations
- W3C WAI-ARIA Authoring Practices Checkbox Design Pattern covers the usage of ARIA names, state and roles, as well as the expected keyboard intractions.
- IBM Accessibility Checklist Checkpoint:
- 1.3.1 Information and Relationships (WCAG Success Criteria 1.3.1)
- 3.3.2 Labels and Instructions (WCAG Success Criteria 3.3.2)
- 4.1.2 Name, Role, Value (WCAG Success Criteria 4.2.1)
Accessibility testing
Accessibility issues are tracked in the Carbon Component GitHub repository.
Automated test
Automated test environment
Results
- macOS Mojave version 10.14.6 with VoiceOver
- Chrome Version 77.0.3865.90
- Dynamic Assessment Plugin Version 1.8.0.0 - IBM Accessibility WCAG 2.1 Sept. 2019 Ruleset
- Carbon React Version 7.7.1
- Chrome Version 77.0.3865.90
- Dynamic Assessment Plugin Version 1.8.0.0 - IBM Accessibility WCAG 2.1 Sept. 2019 Ruleset
- Carbon React Version 7.7.1
DAP Test
- Violations
- Violations
macOS Screen reader tests
Environment
Results
- macOS Mojave version 10.14.6 with VoiceOver
- Chrome Version 77.0.3865.90
- Carbon React Version 7.7.1
- Chrome Version 77.0.3865.90
- Carbon React Version 7.7.1
VoiceOver(VO) Test:
- Press the Tab key to navigate to the first checkbox. VO announces the label, the state as checked, that it is a checkbox input and the label group.
- Press the Space key to select or deselect the checkbox.
- Press the Tab key to navigate to the indeterminable checkbox. VO announces the label, and the state as mixed.
- Press the Space key to select or deselect the checkbox.
- Press the Tab key and the disabled checkbox is skipped.
- Control-Option-Left Arrow key to read the disabled field. VO announces, "Disabled checkbox, dimmed unchecked checkbox".
- Tab to the next group of checkboxes with the same results.
- macOS Mojave version 10.14.6 with VoiceOver
- Safari Version 13.0.2
- Carbon React Version 7.7.1
- Safari Version 13.0.2
- Carbon React Version 7.7.1
VoiceOver(VO) Test:
- Press the Tab key to navigate to the first checkbox. VO announces the label, the state as checked, the checkbox legend and the group.
- Press the Space key to select or deselect the checkbox.
- Press the Tab key to navigate to the indeterminable checkbox. VO announces the label, and the state as unchecked (Note: The mixed state is not announced).
- Press the Space key to select or deselect the checkbox.
- Press the Tab key and the disabled checkbox is skipped.
- Control-Option-Left Arrow key to read the disabled field. VO announces, "Off off dimmed unchecked checkbox".
- Tab to the next group of checkboxes with the same results.
Windows screen reader tests
Environment
Results
- Microsoft Windows 10
- Firefox Version 67
- JAWS 19.1810.64
- Carbon React Version 7.7.1
- Firefox Version 67
- JAWS 19.1810.64
- Carbon React Version 7.7.1
JAWS test:
- Navigate among check boxes by pressing the Tab and Shift-Tab keys, or X and Shift+X keys to jump to next or previous checkboxes.
- When navigating to a checkbox, JAWS announces the label, checkbox, and the status of the checkbox.
- Disabled checkboxes can only be found by using the Up and Down Arrow keys, when JAWS.
- Press the Space key to select or deselect the checkbox. JAWS announces the status of checked or unchecked.
- Microsoft Windows 10
- Chrome Version 73.0.3683.103 (Official Build) (64-bit)
- JAWS Version 19.1810.64
- Carbon React Version 7.7.1
- Chrome Version 73.0.3683.103 (Official Build) (64-bit)
- JAWS Version 19.1810.64
- Carbon React Version 7.7.1
JAWS test:
- Navigate among check boxes by pressing the Tab and Shift-Tab keys, or X and Shift+X keys to jump to next or previous checkboxes.
- When navigating to a checkbox, JAWS announces the label, checkbox, and the status of the checkbox.
- Disabled checkboxes can only be found by using the Up and Down Arrow keys, when JAWS announces "disabled checkbox checkbox unchecked unavailable".
- Press the Space key to select or deselect the checkbox. JAWS announces the status of checked or unchecked.
- Microsoft Windows 10
- Chrome Version 73.0.3683.103 (Official Build) (64-bit)
- NVDA Version 2018.4.1
- Carbon React Version 7.7.1
- Chrome Version 73.0.3683.103 (Official Build) (64-bit)
- NVDA Version 2018.4.1
- Carbon React Version 7.7.1
NVDA test:
- Navigate among check boxes by pressing the Tab and Shift-Tab keys, or X and Shift+X keys to jump to next or previous checkboxes.
- When navigating to a checkbox, NVDA announces the label, checkbox, and the status of the checkbox, but repeats the information twice.
- When navigating to an indeterminable checkbox NVDA announces, "indeterminate checkbox indeterminate checkbox checkbox half checked".
- Disabled checkboxes can only be found by using the Up and Down Arrow keys, or the the X and Shift+X keys. NVDA announces "checkbox unavailable not checked disabled checkbox".
- Press the Space or Enter key to select or deselect the checkbox. NVDA announces the status of checked or unchecked.
Android screen reader tests
Environment
Results
- Android Version 9 with Talkback
- Chrome Version 73.0.3683.103 (Official Build) (64-bit)
- Carbon React Version 7.7.1
- Chrome Version 73.0.3683.103 (Official Build) (64-bit)
- Carbon React Version 7.7.1
Talkback Test:
- Navigate to the checkbox by swiping left or right, or press the Left or Right Arrow keys. Talkback announces,the label, field type, and the status of the checkbox.
- The status of indeterminate checkboxes is not announced properly, Talkback only announces checked or unchecked.
- When tapping on a checkbox, or pressing the Alt-Enter keys, Talkback announces the new status of the checkbox as checked or not checked.
iOS screen reader tests
Environment
Results
- iOS Version 13.1.3 with VoiceOver
- Safari Version 13.1.3
- Carbon React Version 7.7.1
- Safari Version 13.1.3
- Carbon React Version 7.7.1
VoiceOver Test:
- Navigate to the checkbox by swiping left or right, or press the Left-Arrow or Right-Arrow keys when quick navigation is turned on. VO announces,the label, field type, and the status of the checkbox.
- The status of indeterminate checkboxes is not announced properly, VoiceOver only announces checked or unchecked.
- VoiceOver announces the beginning of the list, nesting level, content of the list item, the end of the list.
- When tapping on a checkbox, or pressing VO+Space, VoiceOver announces the new status of the checkbox as checked or unchecked.