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

Steps for Adobe Commerce (Magento)

1. Identify which `.phtml` template or `.html` Knockout/RequireJS template renders the flagged element — use browser DevTools to inspect the element and note any identifying class or data attribute.
2. Locate the file under `app/design/frontend/<Vendor>/<Theme>/` (custom theme) or the relevant module's `view/frontend/templates/` directory.
3. Open the file and search for the ARIA attribute, then correct its value to the valid string or fix the `id` reference.
4. If the issue is in a JavaScript component (e.g. a dropdown or modal using ui-component), find the relevant `.js` file and correct the attribute value set via `ko` bindings or DOM manipulation.
5. Run `bin/magento cache:flush` and `bin/magento setup:static-content:deploy` after changes, then verify with the axe browser extension on the storefront.

<button aria-expanded="false" aria-controls="nav-menu">Menu</button>
<nav id="nav-menu"><!-- links --></nav>

What is aria valid attr value?

ARIA (Accessible Rich Internet Applications) attributes are special HTML attributes — like `aria-label`, `aria-expanded`, `aria-describedby`, and dozens of others — that give screen readers and other assistive technologies extra information about what an element is and how it behaves. Every ARIA attribute has a strict set of allowed values defined by the ARIA specification. For example, `aria-expanded` must be `"true"` or `"false"`, and `aria-describedby` must point to a real element ID that actually exists on the page. An "invalid attribute value" means one of these attributes has been given a value that doesn't match the rules — such as a typo, a number where a true/false is expected, or a reference to an ID that doesn't exist.

When an ARIA attribute carries an invalid value, screen readers either ignore it entirely or misread the element to the user — for example, announcing a navigation menu as always collapsed, or linking a form field to a description that doesn't exist. This directly breaks the experience for blind and low-vision shoppers, which can cost you sales from that audience. More critically, WCAG 4.1.2 (Name, Role, Value) is a Level AA requirement in most jurisdictions — including the EU's EAA (enforceable from June 2025), the US ADA, and the UK's PSBAR — meaning non-compliance creates real legal exposure and risk of accessibility lawsuits. Google also evaluates accessibility signals as part of overall quality, so repeated failures can suppress organic rankings and reduce trust signals.

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