Accessibility Insights

Back to Info and Examples for Accessibility Insights for Web

aria-valid-attr-value

ARIA attributes must have valid values.

Why it matters

When an assistive technology encounters an element with an invalid ARIA attribute value, it might ignore the attribute or respond to it in an unexpected way.

As a result, people who use assistive technologies might find the element difficult or impossible to use.

How to fix

Provide a valid value for each ARIA attribute:

  • Make sure you are using the correct type of value. (For example, some attributes allow only "true" or "false" values, while others allow the value to remain undefined.)
  • Make sure the value is spelled correctly.
  • Consider whether the attribute has a default value that must be modified in order to be valid in the current context.
  • If the attribute references an ID, make sure the ID exists on the page.

For details about all ARIA attributes, including their allowed values, see Accessible Rich Internet Applications (WAI-ARIA) 1.1: Definitions of States and Properties.

Example

 

Fail

This radio button has an aria-checked attribute with an invalid value of "no". Because assistive technologies are likely to ignore the invalid value, some users won't know whether the radio button is checked.
<div role="radio" aria-checked="no" tabindex="0">Small</div>
 

Pass

The aria-checked attribute has a valid value of "false". Assistive technologies can inform users that the radio button is currently unchecked.
<div role="radio" aria-checked="false" tabindex="0">Small</div>

About this rule

This rule passes if the following is true:

  • ARIA attribute values are valid

More examples