Aria valid attr

What it is

ARIA (Accessible Rich Internet Applications) attributes are special HTML attributes like `aria-label`, `aria-labelledby`, and `aria-describedby` that tell screen readers and other assistive technologies what your page elements are and how they work. Every valid ARIA attribute has a precisely defined name — even a single missing or transposed letter (such as writing `aria-labeledby` instead of `aria-labelledby`) makes the attribute completely meaningless to assistive technology. Browsers silently ignore unrecognised ARIA attributes, so the intended accessibility information is simply never conveyed. This rule (WCAG 4.1.2, "Name, Role, Value") requires that all interface components have properly programmatically determinable names and roles.

Why it matters

Screen-reader users — people who are blind, have low vision, or have motor disabilities — rely on ARIA attributes to understand and interact with buttons, forms, dialogs, and navigation. When an ARIA attribute name is misspelled, the assistive technology receives no information at all, as if the attribute were never there. This can make critical controls completely unusable for those users, creating a real accessibility barrier and potential legal liability under laws such as the ADA (US), the European Accessibility Act, and the UK Equality Act. Beyond legal risk, accessible sites consistently earn higher user trust, lower bounce rates, and broader audience reach — all of which support organic rankings and conversions.

How to fix it

1. Search your theme templates, custom HTML blocks, and JavaScript files for every attribute that starts with `aria-`. A global find (Ctrl/Cmd+F across files, or a code search) for the prefix `aria-` is the fastest approach.
2. Compare each attribute name you find against the official ARIA specification's list of valid attributes (e.g. `aria-label`, `aria-labelledby`, `aria-describedby`, `aria-expanded`, `aria-hidden`, `aria-controls`, `aria-live`, etc.). Pay special attention to common misspellings: `aria-labeledby` → `aria-labelledby`, `aria-descrribedby` → `aria-describedby`.
3. Correct every invalid attribute name in place, ensuring you do not accidentally change the attribute's value — only its name.
4. If the invalid attribute appears inside a third-party widget, plugin, or app embed, check whether an update is available that fixes the issue, or contact the vendor.
5. After making changes, re-run an automated accessibility checker (e.g. axe DevTools browser extension, WAVE, or your platform's built-in accessibility scanner) to confirm the `aria-valid-attr` violations are resolved.
6. Verify with a screen reader (NVDA + Firefox on Windows, or VoiceOver + Safari on macOS/iOS) that the element is announced correctly and is fully operable.

<!-- ❌ WRONG — misspelled attribute; screen readers ignore it entirely -->
<input type="text" id="email" aria-labeledby="email-label">

<!-- ✅ CORRECT — double 'l' in labelledby -->
<input type="text" id="email" aria-labelledby="email-label">

<!-- Other common misspellings to watch for: -->
<!-- aria-descrribedby  →  aria-describedby  -->
<!-- aria-reqired       →  aria-required      -->
<!-- aria-expaned       →  aria-expanded      -->
<!-- aria-valuenow      →  aria-valuenow  (this one IS correct) -->

Fix it on your platform

Pick your platform for the exact steps.

Frequently asked questions

Authoritative references

• How to fix this specific rule — Deque/axe (rule reference)
• WCAG 2 overview — W3C WAI
• ARIA basics — MDN