Aria valid attr value

What it is

ARIA (Accessible Rich Internet Applications) attributes are special HTML attributes — like `aria-labelledby`, `aria-describedby`, `aria-controls`, and `aria-activedescendant` — that give screen readers and other assistive technologies extra information about how elements on a page work and relate to each other. Many of these attributes must contain a valid value to be meaningful: for example, `aria-labelledby="product-title"` only works if an element with the id `product-title` actually exists in the page. When an ARIA attribute is given an invalid value — a misspelled ID, a blank string, a value that doesn't exist, or a value that's not in the allowed list for that attribute — the browser and screen reader can't use it, making that element confusing or invisible to users who rely on assistive technology. WCAG Success Criterion 4.1.2 requires that all user interface components have programmatically determinable names, roles, and values — and broken ARIA values directly violate this requirement.

Why it matters

Screen reader users — including many people with visual, motor, or cognitive disabilities — depend entirely on correctly coded ARIA to understand interactive components like modals, dropdowns, carousels, tabs, and forms. A broken `aria-labelledby` value, for example, means a blind shopper hears nothing when their screen reader focuses on your "Add to Cart" button or product image. Beyond the direct user impact, WCAG 4.1.2 is a Level A requirement — the baseline — so violations expose your store to accessibility complaints and legal risk in jurisdictions like the US (ADA), UK (Equality Act), and EU (European Accessibility Act). Google also uses accessibility signals as part of overall page-quality evaluation, so a more accessible, error-free store can benefit organic rankings over time. Fixing invalid ARIA values is a targeted, low-cost change that directly improves the experience for millions of assistive-technology users worldwide.

How to fix it

1. Identify every failing element by running an accessibility audit tool (e.g., axe DevTools browser extension, Lighthouse, or WAVE) and noting the element, attribute name, and the offending value flagged as invalid.
2. For ID-reference attributes (aria-labelledby, aria-describedby, aria-controls, aria-owns, aria-activedescendant): verify that the ID value in the attribute exactly matches an existing element's id attribute on the same page — check for typos, case mismatches, or elements that were removed from the page.
3. For enumerated-value attributes (aria-live, aria-haspopup, aria-autocomplete, aria-orientation, aria-sort, aria-expanded, aria-checked, etc.): consult the WAI-ARIA specification or MDN ARIA reference to confirm you are using only the allowed keyword values for that specific attribute (e.g., aria-live only accepts 'off', 'polite', or 'assertive').
4. Remove or fix any ARIA attribute whose value is an empty string when the attribute requires a non-empty value — either supply the correct value or remove the attribute entirely if it is not needed.
5. After editing, save and re-run the accessibility scanner to confirm all aria-valid-attr-value violations are resolved before publishing.
6. Document the corrected ARIA patterns in your team's component library or theme notes so the same mistakes are not reintroduced when the theme or page templates are updated.

<!-- WRONG: aria-labelledby points to an ID that doesn't exist -->
<button aria-labelledby="prodcut-title">Add to Cart</button>

<!-- WRONG: aria-live has an invalid value -->
<div aria-live="yes">Updating cart…</div>

<!-- CORRECT: aria-labelledby matches a real element ID exactly -->
<h1 id="product-title">Blue Wool Scarf</h1>
<button aria-labelledby="product-title">Add to Cart</button>

<!-- CORRECT: aria-live uses an allowed keyword -->
<div aria-live="polite">Updating cart…</div>

<!-- CORRECT: aria-describedby references an existing element -->
<input type="email" id="email" aria-describedby="email-hint" />
<span id="email-hint">We'll never share your email.</span>

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