Checkboxes customized using ARIA

Summary

• Principle.
• Core HTML base.
• ARIA roles, states and properties.
• Keyboard interaction.
• Note.

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.

Core HTML base

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

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.

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

2 comments

Back to top