Checkboxes simulated using ARIA

Summary

Principle

Checkboxes are form elements that allow the user to select one or more options among a group of options.

Checkboxes are “simulated using ARIA” when they are not built using the standard HTML code for checkboxes as found in the specification: <input type="checkbox" />.

Below is a way to reproduce the behavior of a standard default HTML checkbox, when standard HTML cannot be used.

This code is based on the “Checkbox” design pattern found in the WAI-ARIA 1.1 Authoring Practices of the W3C.

Core HTML base

<p id="question">Question</p>
<ul aria-labelledby="question" role="group">
  <li role="checkbox" aria-checked="false" tabindex="0">
    <img aria-hidden="true" src="checkbox.svg" alt="Not selected:" />
    Choice 1
  </li>
  <li role="checkbox" aria-checked="true" tabindex="0">
    <img aria-hidden="true" src="checkbox-checked.svg" alt="Selected:" />
    Choice 2
  </li>
  <li role="checkbox" aria-checked="false" tabindex="0">
    <img aria-hidden="true" src="checkbox.svg" alt="Not selected:" />
    Choice 3
  </li>
</ul>

ARIA roles, states and properties

Keyboard interaction

Keyboard interaction is the same as for classic HTML, except that the keyboard focus is on the checkbox container, and not only on the checkbox itself.

Spacebar

When the keyboard focus is on the checkbox container, this key toggles between the checked and unchecked states.

Tab

This key moves focus to each checkbox in the logical order before leaving the group.

Shift + Tab

This key combination has the same behavior as the Tab key, except in the reverse order.

Note

The image source and its alternative text should be modified according to the state of the associated checkbox.

Note that <img /> tags can also be replaced with scalable vector graphics <svg>.

Examples of components

The following components are proposed here because their level of accessibility is considered good or very good.

However, before using them in your project, it is important to check that the specifications presented above have been respected. Depending on the version used, the components may need some adjustments before they can be used in your project.

Comments

Add a comment

Required fields are marked *.

Back to top