Checkboxes customized using ARIA

Summary

Principle

Checkboxes are form elements that are used to select a single option out of a group of possible options.

Checkboxes are “customized 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 of reproducing 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 must be modified according to the state of the associated checkbox.

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

Components

The “Checkboxes customized in ARIA” components are shown here because their level of accessibility is considered good or very good.

However, before using them in your project, it is important to check for compliancy with the specifications presented above. Certain components may require some adjustments.

2 comments

  • Par Takeshi Tokugawa, le 6 April 2022 at 11h12.

    Thank you for the receptы.

    Unfortunately, I got “Bad value “checkbox” for attribute “role” on element “li”.” message from W3C HTML validator. HTML validity vs. accessibility conflict?

    Répondre

    • Par Jimmy Burbure, le 16 June 2022 at 15h13.

      Hello and thank you for your feedback.

      After testing in the W3C validator, it turns out that there is a problem and I think it is indeed a problem with the validator.

      I will do more research and update the page if necessary.

      Thank you and have a nice day.

      Répondre

Add a comment

Required fields are marked *.

Back to top