Elements must use only ARIA roles appropriate for that element.
Why it matters
An ARIA role attribute can be added to an element to instruct assistive technologies to expose the element as something other than its native HTML element type. For example, an
<a> element with
role="button" is to be exposed as a button, not a link.
Some ARIA roles are only appropriate to specify on certain elements. The reason for this is that some HTML elements have have what's referred to as "strong native semantics" - meaning that these elements have implicit ARIA semantics and features which can contradict, or cause uncertain behaviors for AT when developers specify ARIA roles on elements which do not share these native semantics. As a result, people who use assistive technologies might find the element difficult or impossible to use, or the explicitly set role may be entirely ignored to mitigate the contradictory semantics the developer has specified.
How to fix
As necessary, review the ARIA in HTML specification to see which roles are allowed on specific HTML elements.
Identify the ARIA role that best identifies the element’s function.
Assign a valid ARIA role if needed.
Note: Some ARIA roles, while technically valid, are not widely supported by assistive technologies.
article role which is not appropriate as buttons are interactive elements and articles are not. As such, people who use assistive technologies will not be able to effectiely interact with it, as its functionality will be obscured to them.
role=”article” from the button ensures everyone can correctly interact with the element.
About this rule
This rule passes if ALL of the following are true:
- Elements with explicit role attributes have values that are both valid ARIA roles, and the role is allowed on the element to which it is specified.
- The role is widely supported in screen readers and other assistive technologies.