[aria-*] attributes are not valid or misspelled
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.)
Each ARIA role supports a specific subset of aria-* attributes that define the state and properties of that role. For example, the aria-selected attribute is used to indicate whether elements with option, 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, the 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.
Resources #
- 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