How to fix aria valid attr on Shopify

Steps for Shopify

1. Go to Online Store → Themes → (your active theme) → Actions → Edit code.
2. Use the 'Search files' box (top of the file tree) to search for `aria-labeledby` (or whichever misspelled attribute was flagged). Shopify's code editor searches across all Liquid, CSS, and JS files in the theme.
3. Open each file returned, locate the misspelled attribute, and correct it (e.g. change `aria-labeledby` to `aria-labelledby`).
4. If the error is inside a Shopify app embed (e.g. a reviews widget or chat widget), open Apps → (the relevant app) and check for a settings update, or contact the app developer.
5. Click Save on each file you edit, then preview the theme and re-run axe DevTools to confirm the fix.

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

What is aria valid attr?

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.

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.

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