Why is this an issue?

The WAI-ARIA attribute used to assign a role to an element is named role, not aria-role. Unlike every other WAI-ARIA attribute, role does not start with the aria- prefix, which makes aria-role a common slip — especially since we routinely talk about adding "ARIA roles" to elements.

Browsers and assistive technologies do not recognize aria-role. When the typo is present, the intended role is silently ignored: screen readers fall back to the element’s native role (or no role at all for generic elements such as <div> and <span>), so the role announced to users does not match what the author intended.

How to fix it

Rename the aria-role attribute to role.

Code examples

Noncompliant code example

<span aria-role="button">Reset</span>

Compliant solution

<span role="button">Reset</span>

Resources

Documentation

Standards