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.)
role supports a specific subset of
aria-* attributes that define the state and properties of that role. For example, the
aria-selected attribute indicates whether an element is currently selected depending on whether its value is
If an element's ARIA attribute doesn't have a valid value, assistive technologies won't be able to interact with it as the developer intended.
How Lighthouse determines an ARIA attribute's value is invalid #
Lighthouse flags ARIA attributes with invalid values:
Lighthouse uses the states and properties from the WAI-ARIA specification to check that all ARIA attributes have valid values. A page fails this audit when it contains an attributes with an invalid value.
In the example Lighthouse audit above,
aria-checked should be set to either
This issue is important to fix and probably indicates a mistaken assumption in your code. In the example above, the element is still announced as a checkbox, but it will have an implicit state of
unchecked, which may not be what's intended.
How to fix invalid ARIA attribute values #
Refer to the WAI-ARIA supported states and properties to see the full list of valid ARIA attribute values. Check that you have correct values for any attributes you use.
aria-selected state should toggle between
false when the user clicks the element or presses
Space when the element is focused.
- Source code for
[aria-*]attributes do not have valid values audit
- ARIA attributes must conform to valid values (Deque University)
- Role definitions from the WAI-ARIA specification