Digital Accessibility Knowledge Base

aria-valid-attr-value

ARIA attributes must conform to valid values.

Who might be affected
Screen Reader
Voice Control

Description

The first claim in the WAI-ARIA Authoring Practices 1.1 document, right after the introduction, states: "No ARIA is better than Bad ARIA". This means: "Incorrect ARIA misrepresents visual experiences, with potentially devastating effects on their corresponding non-visual experiences". Using the ARIA attribute can significantly improve the user experience for screen readers and other assistive technology users, but it is crucial to use them correctly as they might do the opposite when they are misused.

Quick Fixes

Make sure you gain valid values to all ARIA attributes.
1✓   <div aria-hidden="true"> <!-- ... --> </div>
2    <!-- There is no "aria-visible" attribute -->
3✗   <div aria-hidden="visible"> <!-- ... --> </div>
4

5    <!-- Role is also an ARIA attribute but it has a specific set of valid values -->
6✗   <div role="modal"> <!-- ... --> </div>
7

See the complete list of the Supported States and Properties and The ARIA Roles Model for a full list of role values.

How Users Are Affected

Users that are dependent on screen readers, or other assistive technology that uses text parsing to convey the content to the user, will not be able to perceive the content.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
4.1.2 Name, Role, Value (A)