What This Rule Checks
ARIA (Accessible Rich Internet Applications) roles are essential for making dynamic web content accessible to users with disabilities. However, these roles must be applied to the correct HTML elements to ensure that assistive technologies can interpret the purpose and functionality of the element accurately. If an invalid role is used, it can confuse screen readers and lead to accessibility issues.
Who Is Affected
This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Deafblind users, who rely on braille displays and cannot access visual or auditory content; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices.
Why This Matters
Invalid role assignments are ignored by assistive technologies, so the intended semantic meaning is lost. In some cases, conflicting roles can cause screen readers to misrepresent the element entirely.
How to Fix
To resolve issues with incorrectly applied ARIA roles, ensure that each element only uses roles allowed by the ARIA specification. Here’s how:
Check ARIA Roles: Make sure the ARIA roles you are using are appropriate for the HTML element.
Remove Invalid Roles: If an element contains an invalid ARIA role, remove or replace it with a valid role that matches the element’s function.
Use the Correct HTML Element: Where possible, use native HTML elements with built-in semantics instead of ARIA roles. Native elements like <button>, <header>, and <nav> are inherently accessible without needing ARIA roles.
Code Examples
<!-- Invalid role on element -->
<meta role="banner">
<!-- Conflicting role -->
<input type="hidden" role="button">
Copy
<!-- Use appropriate elements instead -->
<header role="banner">
...
</header>
<!-- Or use native elements that carry the role -->
<button>Submit</button>
Copy
Common Mistakes to Avoid
- Assigning interactive roles to metadata elements like <meta> or <link>.
- Using role=”button” on elements where it conflicts with implicit semantics.
- Not checking the ARIA in HTML spec for allowed role mappings.
AI Auto-Fix Available
This rule supports ACE™ AI Auto-Fix. When a violation is detected, ACE can automatically generate a code fix for review. The AI analyzes the specific element in context and proposes a targeted remediation that preserves your existing markup and styling. You can preview, modify, and approve the fix before it is applied.
Tip: Remember the first rule of ARIA: don’t use ARIA if a native HTML element can provide the same semantics. Native elements come with built-in keyboard handling and screen reader support that ARIA cannot replicate.