Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

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,