mozilla
Your Search Results

    Using the checkbox role

    Description

    This technique demonstrates how to use 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>

    Working Examples:

    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: pendlepants, Fredchat, hhillen, allen, Sheppy
    Last updated by: allen,