ARIA role should be appropriate for the element
Start building more accessible experiences
Compliance Data & Impact
Disabilities Affected
- Blind
- Deafblind
- Mobility
Standard(s)
- Deque Best Practice
How to Fix the Problem
Ensure all HTML elements with a role attribute are allowed to be
assigned the role value. Refer to the
HTML in ARIA specification
to see which role values are allowed for a given HTML element and context.
Correct markup solutions
<ul role="menu">
<li role="none">
<button role="menuitem">Start</button>
</li>
</ul>Incorrect markup solutions
<ul role="button">Name</ul>
<button role="heading" aria-level="2">Welcome</button>Why it Matters
Using WAI-ARIA roles where they are not allowed can interfere with the accessibility of the web page. Using an invalid HTML element and ARIA role combination will, at best, result in no effect on the accessibility of the application and, at worst, may trigger behavior that disables accessibility for entire portions of an application.
When ARIA roles are used on HTML elements that are not in accordance with the HTML in ARIA specification, they conflict with the semantics of the elements which can cause assistive technology products to report nonsensical user interface (UI) information that does not represent the actual UI.
Rule Description
Not all WAI-ARIA role values are allowed on every HTML element. This Rule checks that each HTML element with an assigned role is allowed to have that role.
The Algorithm (in simple terms)
Check all elements containing WAI-ARIA role attribute values to ensure that the role value is allowed for the element.
Resources
Refer to the complete list of axe 4.7 rules.
Was this information helpful?
Your response was as follows:
Date/Time feedback was submitted: