How to Fix Invalid ARIA Attributes WCAG 2.2

Why this matters

Invalid ARIA attributes cause screen readers to announce incorrect or confusing information. In some cases they completely break the interaction model for assistive technology users. The rule is: no ARIA is better than bad ARIA.

Code examples

<!-- aria-checked is not valid on a link -->
<a href="/settings" aria-checked="true">Settings</a>

<!-- aria-expanded is not valid on a div with no role -->
<div aria-expanded="true">Content</div>

<!-- aria-checked is valid on role=checkbox -->
<div role="checkbox" aria-checked="true" tabindex="0">Option</div>

<!-- aria-expanded is valid on button -->
<button aria-expanded="true" aria-controls="menu">Menu</button>

How to fix it — step by step

1. 1
   Only use ARIA attributes that are listed as allowed for that element's role
2. 2
   Check the ARIA specification at w3.org/TR/wai-aria for allowed attributes per role
3. 3
   When in doubt, use native HTML elements instead — they have correct ARIA semantics built in
4. 4
   Use automated tools like WebPossum to catch invalid ARIA combinations
5. 5
   Remember: the first rule of ARIA is don't use ARIA if a native HTML element works

Test it for free

Use WebPossum to automatically detect this violation and every other WCAG 2.2 issue on your site. Free, instant, no signup required.