Users of screen readers and other assistive technologies need information about the behavior and purpose of controls on your web page. Native 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
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.