[role] values are not valid

[role] values are not valid

Appears in: Accessibility audits

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 audit showing ARIA role has 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.

Resources #

Last updated: Improve article