Using the checkbox role

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. The native HTML checkbox  form control can only have two checked states ("checked" or "not checked"), with an indeterminate state settable via JavaScript. Similarly, 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, or indeterminate

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.
Note: Opinions may differ on how assistive technology should handle this technique. The information provided above is one of those opinions and therefore not normative.

Examples

Example 1: Adding the checkbox role in ARIA

<span role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="chk1-label"></span>
<label id="chk1-label">Remember my preferences</label>

Notes 

The first rule of ARIA is "if you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so." As such, it is recommended to always use the native HTML checkbox  form control instead of recreating a checkbox's functionality with JavaScript and ARIA.

ARIA attributes used

Compatibility

TBD: Add support information for common UA and AT product combinations

Additional resources

Document Tags and Contributors

Last updated by: estelle,