Users of screen readers and other assistive technologies need information about the behavior and purpose of controls on your web page. Built-in HTML controls like buttons and radio groups come with that information built in. For custom controls you create, however, you must provide the information with ARIA roles and attributes. (Learn more in the Introduction to ARIA.)
The ARIA specification includes a defined set of roles. When the value for an element's
role attribute doesn't match a role from the set, assistive technologies can't announce the element correctly or interact with it as the developer intended.
How Lighthouse determines an ARIA role has an invalid value #
Lighthouse flags ARIA roles with invalid values:
Lighthouse uses the role definitions from the WAI-ARIA specification to check that all
role attributes have valid values. A page fails this audit when it contains an element with an invalid
role value. In the example Lighthouse audit above,
button has been misspelled as
buton, which isn't a valid role value.
The Lighthouse Accessibility score is a weighted average of all the accessibility audits. See the Lighthouse accessibility scoring post for more information.
How to fix invalid ARIA role values #
Refer to the WAI-ARIA role definitions to see the full list of valid roles. Make sure all
role attributes are set to a value in the definitions list.
- Source code for
[role]values are not valid audit
- ARIA roles used must conform to valid values (Deque University)
- Role definitions from the WAI-ARIA specification