ARIA
Some roles require their own attributes
- Rule:
aria-required-attr - Severity: Critical
- WCAG level A
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
- Add the attributes the role requires (aria-checked for checkbox, aria-valuenow for slider).
- Keep them updated in JavaScript whenever the state changes, not just on first render.
- A native <input> gives you all of this without ARIA.
In markup
<div role="checkbox" tabindex="0">Subscribe</div><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:
- 4.1.2 Name, Role, Value (opens in new tab) — WCAG level A
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.