aria-valid-attr
ARIA attributes must conform to valid names.
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
1✓ <div aria-hidden="true"> <!-- ... --> </div>2 <!-- There is no "aria-visible" attribute -->3✗ <div aria-visible="true"> <!-- ... --> </div>45✓ <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)
Recommended Reading
- Understanding Name, Role, Value
- Introduction to ARIA - Google Developers
- WAI-ARIA Overview