Appropriate ARIA roles for elements
Last updated:
How to fix incorrect ARIA roles?
Use a role that is allowed for the element, or use the correct semantic HTML element instead:
role=“article” is not allowed on a <button> element
<button role="article">Submit</button>
use the element that matches the intended role.
<button>Enable notifications</button>
<a href="/page">Go to page</a>
Check the ARIA in HTML specification for the list of allowed roles per element. When possible, prefer native HTML elements over adding ARIA roles. A <button> element already has an implicit role of button, so no role attribute is needed on it.
Why is this important?
Screen readers use the role to tell users what an element is. An incorrect role gives users wrong information about how to interact with the element. This can make parts of a page unusable for people relying on assistive technology.
More info:
Rule info
Standard
User impact
Minor impact Minor inconvenience for some users. Fix as time allows. Critical : blocks access entirely Serious : significantly hinders use Moderate : causes difficulty Minor : minimal disruptionFix complexity
High level of required technical expertise To resolve this issue, you need technical expertise in software engineering. Resolving this issue requires modifying the software code, for which you need a background in software engineering.Affects
Free Website Accessibility Audit