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.)
role supports a specific subset of
that define the state and properties of that role.
For example, the
aria-selected attribute is used to indicate whether
tab, or similar roles are currently selected.
If an element's ARIA attribute is invalid, assistive technologies won't be able to interact with it as the developer intended.
How Lighthouse checks for invalid ARIA attributes
Lighthouse flags invalid ARIA attributes:
Lighthouse uses the states and properties from the WAI-ARIA specification to check that all ARIA attributes are valid. A page fails this audit when it contains an invalid attribute.
In the example Lighthouse audit above,
aria-checked attribute has been misspelled as
aria-cheked, making it invalid.
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 attributes
Refer to the WAI-ARIA supported states and properties to see the full list of valid ARIA attributes. Make sure all ARIA attributes on your page match one of the defined states or properties.
- Source code for
[aria-*]attributes are not valid or misspelled audit
- ARIA attributes must conform to valid names (Deque University)
- States and properties from the WAI-ARIA specification