What This Rule Checks
ARIA attributes must be spelled correctly and correspond to valid ARIA attribute names. Using unrecognized attributes will prevent them from functioning as intended, making content inaccessible to assistive technologies.
Who Is Affected
This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Deafblind users, who rely on braille displays and cannot access visual or auditory content; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices.
Why This Matters
Unrecognized ARIA attributes are completely ignored by assistive technologies. The intended accessibility enhancement has zero effect, and developers may believe the element is accessible when it’s not. This is a critical WCAG 4.1.2 violation.
How to Fix
To ensure ARIA attributes are valid:
Check Attribute Names: Ensure all ARIA attributes, like aria-hidden, are spelled correctly. For example, aria-hidden=”true” is correct, while aria-visible=”rute” is invalid.
Use Valid ARIA Attributes: Refer to the WAI-ARIA documentation to verify that the attribute is recognized and appropriate for the element in use.
Code Examples
<!-- Misspelled ARIA attribute -->
<button aria-lable="Close">
X
</button>
<!-- Made-up ARIA attribute -->
<div aria-description="Info section">
...
</div>
Copy
<!-- Correctly spelled ARIA attribute -->
<button aria-label="Close">
X
</button>
<!-- Use valid ARIA attribute -->
<div aria-describedby="info-desc">
...
</div>
<p id="info-desc">
This section contains account information.
</p>
Copy
Common Mistakes to Avoid
- Misspelling aria-label as “aria-lable” or “aria-labled”.
- Using “aria-description” (not a valid ARIA attribute) instead of aria-describedby.
- Confusing data attributes (data-aria-*) with actual ARIA attributes.
AI Auto-Fix Available
This rule supports ACE™ AI Auto-Fix. When a violation is detected, ACE can automatically generate a code fix for review. The AI analyzes the specific element in context and proposes a targeted remediation that preserves your existing markup and styling. You can preview, modify, and approve the fix before it is applied.
Tip: Remember the first rule of ARIA: don’t use ARIA if a native HTML element can provide the same semantics. Native elements come with built-in keyboard handling and screen reader support that ARIA cannot replicate.
Related WCAG Criteria
- 4.1.2: Name, Role, Value