Checkboxes customized using ARIA



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 ARIA Authoring Practices Guide (APG) of the W3C.

Core HTML base

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

ARIA roles, states and properties

  • role="group" must be added to the group of checkboxes.
  • role="checkbox" and tabindex="0" must be added to the container of each checkbox.
  • aria-hidden="true" must be applied to all the images simulating a checkbox.
  • The aria-checked attribute must be applied to the content of each checkbox. Its value must be set dynamically according to the state of the associated checkbox:
    • aria-checked="true" when the check box is checked.
    • aria-checked="false" when the check box is not checked.
  • The checkbox group must be programmatically associated with the group via the aria-labelledby attribute:
    • The tag for the group must have an id attribute set to a unique value.
    • The checkbox must must have an aria-labelledby attribute set to the value of the id attribute of the check box group.

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.


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


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.


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>.


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.


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

    Ce commentaire a été publié il y a plus de 2 ans. Il se peut que son contenu ne soit plus d'actualité.

    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?


    • 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.


Add a comment

All fields are mandatory.

Back to top