How to fix aria valid attr on Headless / Custom (I build in code)

Steps for Headless / Custom (I build in code)

1. Run a global find-and-replace in your repository for the misspelled attribute string (e.g. `aria-labeledby`) using your IDE or the command line: `grep -r 'aria-labeledby' ./src`
2. Replace every occurrence with the correctly spelled attribute (e.g. `aria-labelledby`), including inside JSX (`aria-labelledby={...}`), Vue templates, Handlebars, Nunjucks, or any other templating language in use.
3. Check generated or dynamic HTML produced by JavaScript — search component files for the attribute being set via `element.setAttribute('aria-labeledby', ...)` and correct the string argument.
4. Commit the changes, run your build, and deploy.
5. Add a linting rule to catch future regressions: eslint-plugin-jsx-a11y (React) or axe-linter will flag invalid ARIA attribute names at development time.
6. Verify the fix in the browser using the axe DevTools extension or by running `axe(document)` in the browser console.

What is aria valid attr?

ARIA (Accessible Rich Internet Applications) attributes are special HTML attributes — like `aria-label`, `aria-labelledby`, or `aria-hidden` — that tell screen readers and other assistive technologies what an element is and how it behaves. Every valid ARIA attribute has an exact, officially defined name. An "invalid ARIA attribute name" means your HTML contains an ARIA attribute that doesn't exist in the official specification — most commonly a typo like `aria-labeledby` (one 'l' instead of two) instead of `aria-labelledby`. Because the attribute name is wrong, the browser and assistive technology silently ignore it entirely, as if it were never there.

When an ARIA attribute name is misspelled, screen readers receive no accessibility information from it — the element appears unlabelled or unidentifiable to blind and low-vision shoppers. This directly harms the shopping experience for millions of people with disabilities and puts your store at legal risk under laws like the ADA (US), AODA (Canada), EAA (EU), and Equality Act (UK), all of which reference WCAG 2.x conformance. Accessibility lawsuits targeting online stores have increased sharply year over year, and a simple typo is exactly the kind of findable, actionable violation that appears in demand letters. Fixing it is quick and meaningfully improves usability for customers using assistive technology, which can also improve conversion rates in that segment.

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