Elements Must Only Use Allowed ARIA Attributes

What Is This Issue?

ARIA (Accessible Rich Internet Applications) attributes enhance accessibility, but using them incorrectly can cause more harm than good. Each HTML element and ARIA role has specific attributes that are allowed. Using invalid combinations creates unpredictable behavior for assistive technology users.

Why This Matters

Invalid ARIA can confuse screen readers, causing them to announce incorrect information or behave unexpectedly. The first rule of ARIA is: don't use ARIA if native HTML can do the job. The second rule is: if you must use ARIA, use it correctly.

Common Mistakes

• Using aria-checked on elements that aren't checkboxes or switches
• Using aria-expanded on elements that don't control expandable content
• Adding ARIA attributes to elements that don't support them
• Conflicting native HTML semantics with ARIA roles

How to Fix This Issue

1. Review ARIA Specs: Check which attributes are valid for each role
2. Use Native HTML: Prefer semantic HTML over ARIA when possible
3. Test with Screen Readers: Verify the experience is correct
4. Run Accessibility Audits: Use axe or similar tools to catch issues