ARIA roles are not free-form text. Only roles defined in the WAI-ARIA specification can be used. If an element is assigned an invalid, misspelt, abstract, or non-existent ARIA role, the browser will ignore that role entirely. When this happens, assistive technologies never receive the intended semantics, and the element may not behave or be announced as expected.
WCAG Success Criterion
Success Criterion 4.1.2 – Name, Role, Value (Level A)
User interface components must have a name and role that can be programmatically determined, and states, properties, and values that can be set by the user must be programmatically settable and announced to assistive technologies.
When a role attribute is present, its value must be valid and recognisable so the role can be exposed through the accessibility tree.
What This Rule Checks
This rule ensures that:
- Every value assigned to
role=""corresponds to a valid ARIA role - The role is not abstract
- The role exists in the current WAI-ARIA specification
If the role value is invalid, the browser ignores it.
What Happens When a Role Is Invalid
When a role value is invalid:
- The browser ignores the role
- Assistive technologies never see it
- The element falls back to its native semantics, if any
- If the element has no native role (for example, a
<div>), it remains generic
Example:
<div role="buton">Submit</div>Result:
- The role is ignored
- The element is not exposed as a button
- Screen readers treat it as a generic container
Valid ARIA Role Categories
ARIA roles must come from the WAI-ARIA specification. Examples include:
Landmark Roles
banner, navigation, main, search, contentinfo, complementary, region, form
Widget Roles
button, checkbox, radio, textbox, slider, switch, tab, tabpanel, menuitem, option
Composite Widget Roles
combobox, listbox, menu, menubar, radiogroup, tablist, tree, grid
Document Structure Roles
article, heading, list, listitem, note, separator
Only roles defined by the specification are allowed.
Common Invalid Role Examples
These examples fail because the role value is not valid:
<div role="clickable">Save</div>
<div role="buton">Submit</div>
<div role="inputbox">Email</div>
These role values do not exist in ARIA and are ignored by the browser.
Abstract Roles Are Not Allowed
Some ARIA roles are abstract. They exist only for inheritance in the specification and must not be used in markup.
Example:
<div role="command">Save</div>Although command exists in the spec, it is abstract and invalid for author use.
Important Nuance: Valid Role ≠ Correct Usage
A role value being valid does not guarantee accessibility.
A valid role can still cause accessibility issues if it:
- Conflicts with the element’s native semantics
- Violates required ARIA rules
- Is missing required states or properties
Example:
<button role="heading">Submit</button>headingis a valid role- But it conflicts with native button semantics
- This creates incorrect role exposure
This rule checks valid role values only, not correct role usage.
Native HTML vs ARIA Roles
Native HTML elements already expose correct roles through the accessibility APIs.
Examples:
<button>Save</button>
<a href="/settings">Settings</a>ARIA roles should only be used when native HTML cannot provide the required semantics. Using ARIA incorrectly is worse than not using ARIA at all.
Why This Matters
Screen readers and other assistive technologies do not read HTML directly. Browsers translate valid HTML and ARIA semantics into the accessibility tree, which assistive technologies rely on to understand:
- What an element is
- How it behaves
- How users can interact with it
If a role value is invalid:
- The role is ignored
- The element’s purpose may be unclear
- Users may not be able to interact with it correctly
This can directly impact navigation, operation, and understanding.
How This Is Tested
Accessibility tools and manual audits verify that:
- Every role value is defined in the ARIA specification
- No abstract roles are used
- Invalid or invented roles are not present
If a role value is invalid, the browser will not expose it, and the issue is immediately detectable.
Wrapping Up
ARIA roles are only useful when they are valid and recognised by the browser. If a role value is misspelt, abstract, or does not exist in the ARIA specification, the browser ignores it, and assistive technologies never receive the intended semantics. In those cases, the element falls back to its native behaviour or remains generic, which can break accessibility expectations.
Using valid ARIA roles is not about adding more attributes.
It is about ensuring that the role of every interactive or structural element can be programmatically determined and reliably exposed to assistive technologies.
