How to fix aria valid attr on Adobe Commerce (Magento)

Steps for Adobe Commerce (Magento)

1. Identify the affected template file using your browser's DevTools (right-click the element → Inspect) and note the surrounding HTML context to search for it in your codebase.
2. In your Magento installation, search your active theme directory (`app/design/frontend/<Vendor>/<Theme>/`) for the misspelled attribute using a code editor or CLI: `grep -r 'aria-labeledby' app/design/`.
3. Also search core module templates that may have been copied as overrides: `grep -r 'aria-labeledby' vendor/magento/`.
4. Open the relevant `.phtml` or `.html` (Knockout/UI Component) file, correct the attribute name, and save.
5. If the error is in a third-party extension, check for an updated version on the vendor's site or Adobe Commerce Marketplace.
6. Run `bin/magento cache:flush`, then verify with axe DevTools in a browser.

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