What This Rule Checks
ARIA roles are attributes that define the purpose or behavior of elements on a webpage, helping assistive technologies understand and interact with the content. It’s essential that the values assigned to the role attribute in your HTML are valid ARIA roles. Invalid or incorrect roles can lead to poor accessibility, causing assistive technologies like screen readers to misinterpret the function of an element.
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 values are completely ignored by assistive technologies. The element reverts to its implicit role (usually “generic”), stripping away all intended semantics. This is a critical WCAG 4.1.2 failure.
How to Fix
To improve accessibility, use the correct ARIA roles based on the element’s function. Each role enhances navigation and interaction for users with assistive technologies.
Code Examples
<!-- Misspelled ARIA role -->
<div role="buton">
Click me
</div>
<!-- Made-up role -->
<div role="card">
Content
</div>
Copy
<!-- Valid ARIA role -->
<div role="button" tabindex="0">
Click me
</div>
<!-- Use native element or valid role -->
<article>
<div>
Content
</div>
</article>
Copy
Common Mistakes to Avoid
- Misspelling role names (e.g., “buton” instead of “button”, “headding” instead of “heading”).
- Inventing custom role names not defined in the WAI-ARIA spec.
- Using roles from older ARIA drafts that were never finalized.
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.
Related WCAG Criteria
- 4.1.2: Name, Role, Value