The checkbox role is used for checkable interactive controls. If an element uses role="checkbox" it is required for that element to also have a aria-checked attribute that exposes the checkbox's state to assistive technology. While the native HTML checkbox form control can only have two checked states ("checked" or "not checked"), a role=checkbox element can expose three states through aria-checked:
- aria-checked="true": The checkbox is checked
- aria-checked="false": The checkbox is not checked
- aria-checked="mixed": The checkbox is partially checked
The developer is required to dynamically change the value of the aria-checked attribute when the checkbox is activated.
Since a checkbox is an interactive control it must be focusable and keyboard accessible. If the role is applied to a non-focusable element, the tabindex attribute will have to be used to change this. The expected keyboard shortcut for activating a checkbox is the Space key.
Possible effects on user agents and assistive technology
When the checkbox role is added to an element, the user agent should do the following:
- Expose the element as having an checkbox role in the operating system's accessibility API.
- When the aria-checked value changes, send an accessible state changed event.
Assistive technology products should do the following:
- Screen readers should announce the element as a checkbox, and optionally provide instructions on how to activate it.
Examples
Example 1: Adding the checkbox role in ARIA
<span role="checkbox" aria-checked="false" tabindex="0" id="chk1"></span> <label for="chk1">Remember my preferences</label>
Notes
ARIA attributes used
Related ARIA techniques
Compatibility
TBD: Add support information for common UA and AT product combinations