Skip to content
Learn Measure Blog Case studies About
On this page
  • How Lighthouse determines an ARIA attribute's value is invalid
  • How to fix invalid ARIA attribute values
  • Resources

[aria-*] attributes do not have valid values

May 2, 2019 β€” Updated Sep 19, 2019
Appears in: Accessibility audits
On this page
  • How Lighthouse determines an ARIA attribute's value is invalid
  • How to fix invalid ARIA attribute values
  • Resources

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 indicates whether an element is currently selected depending on whether its value is true or false.

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 audit showing aria-checked without the value 'true'

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 true, false, or mixed.

Browsers treat HTML Boolean attributes, such as hidden or checked, as true if they're present in an element's opening tag and false if they're not. However, ARIA attributes require an explicittrue or false value. This is because most ARIA attributes actually support a third stateβ€”undefinedβ€”or a tristate with an intermediate mixed value.

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.

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 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.

Also verify that your JavaScript is updating ARIA state values as users interact with your page. For example, an option role's aria-selected state should toggle between true and false when the user clicks the element or presses Enter or Space when the element is focused.

Resources #

  • 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
Last updated: Sep 19, 2019 β€” Improve article
Return to all articles
Share
subscribe

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.