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