Rampsight

All rules

ARIA

Some roles require their own attributes

Why it matters

A role such as checkbox, slider or combobox is a promise about how the control behaves. Without the required attributes the state cannot be announced, and the control is read as unusable.

How to fix it

  1. Add the attributes the role requires (aria-checked for checkbox, aria-valuenow for slider).
  2. Keep them updated in JavaScript whenever the state changes, not just on first render.
  3. A native <input> gives you all of this without ARIA.

In markup

Fails
<div role="checkbox" tabindex="0">Subscribe</div>
Passes
<div role="checkbox" tabindex="0" aria-checked="false">Subscribe</div>

The requirement behind it

This rule is one way of failing the following WCAG 2.2 success criteria. The W3C, which writes the standard, explains each of them:

Further reading

Deque University on aria-required-attr (opens in new tab)

Deque maintains axe-core, the open-source engine our scanner runs. Their page documents the rule as the engine implements it.

Automated checks find failures a browser can prove. They cannot judge whether a caption is accurate, whether an alt text is useful, or whether a page can be operated end to end with a keyboard — those need a person.