Rule description: flag the attribute aria-role.
Why is aria-role an issue?
The intended attribute is role. Unlike all other attributes defined in the W3C’s WAI-ARIA specification, it does not start with “aria-”, so it is easy to type incorrectly. In HCI research, this type of error is known as a “slip”, i.e. a failure to execute a decision correctly. The decision is to add a custom role to an HTML element; the execution should be to add role=..., but because all other WAI-ARIA attribute names start with “aria-…”, you slip up and write aria-role=... instead. (Also, since we always talk about adding “ARIA roles”, it is easy to fall into the trap of thinking the attribute is called aria-role.) This is an error I regularly see in code by people who are fairly new to accessibility and who don’t systematically use accessibility checkers.
As a consequence, screen readers won’t convey the intended role to the screen reader user, since only the role attribute can be used to add a custom role (to a generic element such as div or span) or to overwrite an HTML element’s native role.
Example of non-compliant code:
<span type="reset" aria-role="button">Reset</span>
In HTML with WAI-ARIA, there should be no exception to this rule. (Except if at some point in the future, the WAI-ARIA specification changes to accept the aria-role attribute.)
Type of issue: Bug.