aria-roles
Web validation
role attribute must be valid, non-abstract, and correctly spelled.Every element that carries a role attribute must provide at least one value that appears in the WAI-ARIA roles taxonomy. Screen readers rely on that taxonomy to understand how the element behaves and to convey that purpose to people who use assistive technology.
A value is invalid when it is misspelled, deprecated, abstract, or unsupported. When that happens, the element’s real function is hidden. Users may hear vague announcements such as “unknown”, or the element may be skipped entirely. Correct roles unlock name, state, and property information that users depend on.
Pass Patterns
Valid landmark role
The navigation role is spelled correctly and is a recognized landmark role, so assistive technologies convey its purpose.
<div role="navigation">
<!-- The navigation content -->
</div>Valid widget role
switch is an accepted widget role, allowing screen readers to announce the control and its state.
<button role="switch" aria-checked="false">Mute</button>Valid fallback role
If a browser or screen reader doesn't support switch, it uses the next valid role in the list, checkbox.
<button role="switch checkbox" aria-checked="false">Mute</button>Fail Patterns
Misspelled role value
navgation (as opposed to navigation, with an “i”) is not a defined role, so the element’s purpose is lost to assistive technology.
<div role="navgation">
<!-- The navigation content -->
</div>Abstract role applied
input is an abstract role. Screen readers ignore abstract roles.
<div role="input">
<!-- The input content -->
</div>ACT Rules
Try It Yourself
Using a screen reader
New to screen reader testing, or need a refresher?
Review this article first: Practical guides for using screen readers
- Load the page and open a screen reader.
- Navigate to the element with the invalid role.
Expected results: The screen reader announces the element’s role (for example, “navigation”).
Actual results: The screen reader announces no role or provides a vague description, indicating an invalid role.
Inspecting the browser dev-tools
- Open the page in a modern browser.
- Right-click the element and choose Inspect.
- Switch to the Accessibility pane.
- Check the Role field.
Expected results: The panel shows a recognized role such as navigation or button.
Actual results: If the field is empty, displays “unknown”, or displays the native semantic for the HTML element, the role is invalid.
FAQ
How does this issue relate to 4.1.2 Name, role, value?
SC 4.1.2 requires that every user-interface component expose an accurate name and role through accessibility APIs. Invalid role values break this contract, preventing assistive technologies from identifying the component.
Why is this issue marked as Critical?
When a role is invalid, assistive technologies cannot identify the element, so users who rely on them lose context and control. The impact is immediate, affects navigation and comprehension, and occurs across all major browsers and screen readers, making this a critical issue.
Where can I find a list of all valid role values?
A list of all valid role values can be found on section 5.3 Categorization of Roles in the ARIA specification. Note that you must not use role values from sub-section 5.3.1 Abstract Roles.
Standards and Regulations
| Standard | Success Criterion | Reference |
|---|---|---|
| WCAG 2.2 | 4.1.2 Name, Role, Value (A) | For all user interface components, the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to assistive technologies. |
| EN 301 549 | 9.4.1.2 Name, Role, Value | Same as the WCAG text. |