How to fix aria valid attr value on Shopify

Steps for Shopify

1. Go to Online Store → Themes → click the three-dot menu next to your active theme → Edit code.
2. Search across all Liquid files (use the search icon in the code editor) for 'aria-labelledby', 'aria-describedby', 'aria-controls', 'aria-live', and other ARIA attributes to locate where they are set.
3. For each ARIA attribute that references an ID (e.g., aria-labelledby="product-title"), make sure the referenced id="product-title" element is rendered in the same page template and the ID string matches exactly — including case.
4. For keyword ARIA attributes (aria-live, aria-haspopup, etc.), replace any non-standard values with the correct allowed keyword from the WAI-ARIA spec.
5. If the issue is inside an app-injected widget (e.g., a reviews or chat app), contact the app developer — you cannot edit their iframe or injected code directly.
6. Save changes, then preview the theme and rerun an axe or Lighthouse audit to verify no aria-valid-attr-value errors remain.

<!-- 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>

What is aria valid attr value?

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.

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.

See the complete Aria valid attr value guide for every platform and the full background.