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. 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.
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" id="chk1"></span>
<label for="chk1">Remember my preferences</label>

Notes 

ARIA attributes used

Compatibility

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

Additional resources

Document Tags and Contributors

Contributors to this page: smarvin, deepu, allen, Fredchat, Sheppy, pendlepants, hhillen
Last updated by: smarvin,