Digital Accessibility Knowledge Base

aria-valid-attr

ARIA attributes must conform to valid names.

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", and it 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 use valid ARIA attributes names.
1✓   <div aria-hidden="true"> <!-- ... --> </div>
2    <!-- There is no "aria-visible" attribute -->
3✗   <div aria-visible="true"> <!-- ... --> </div>
4

5✓   <div aria-expanded="true"> <!-- ... --> </div>
6    <!-- There is no "aria-collapsed" attribute -->
7✗   <div aria-collapsed="true"> <!-- ... --> </div>
8

See the complete list of the Supported States and Properties and see The ARIA Roles Model for a 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)