How to fix aria hidden focus on Adobe Commerce (Magento)

Steps for Adobe Commerce (Magento)

1. Identify the affected template file by running the axe DevTools extension and noting the element's surrounding markup — then use `grep -r 'aria-hidden' app/design/` in your project root to locate the source template.
2. The file is most likely in `app/design/frontend/<Vendor>/<Theme>/Magento_Theme/templates/`, `Magento_Catalog/templates/`, or a similar module template directory.
3. Open the file, locate the `aria-hidden="true"` container wrapping a focusable element, and apply the fix (remove attribute, move control outside, or restrict to decorative icon).
4. If the markup comes from a third-party module, create a template override in your custom theme directory rather than editing the module directly, so upgrades don't revert your fix.
5. Run `bin/magento cache:clean` and `bin/magento setup:static-content:deploy` then re-test on the frontend with axe DevTools.

<!-- ❌ WRONG: a focusable button is trapped inside an aria-hidden container -->
<div aria-hidden="true">
  <button>Add to Cart</button>
</div>

<!-- ✅ OPTION A: Remove aria-hidden so the button is accessible -->
<div>
  <button>Add to Cart</button>
</div>

<!-- ✅ OPTION B: Move the button outside the hidden container -->
<div aria-hidden="true">
  <!-- purely decorative content only -->
</div>
<button>Add to Cart</button>

<!-- ✅ OPTION C: Decorative icon inside a properly labelled button (aria-hidden on icon only) -->
<button aria-label="Add to Cart">
  <svg aria-hidden="true" focusable="false">...</svg>
  Add to Cart
</button>

What is aria hidden focus?

`aria-hidden="true"` is an HTML attribute that tells screen readers to completely ignore an element and everything inside it — as if it doesn't exist. The problem arises when a button, link, or form field sits *inside* one of these hidden containers: sighted keyboard users can still tab to it and activate it, but screen-reader users get no information about what they just focused on. WCAG Success Criterion 4.1.2 (Name, Role, Value) requires that every interactive control be properly named and exposed to assistive technology — a focusable element hidden from the accessibility tree violates this rule.

For the roughly 1-in-5 shoppers who use a keyboard, screen reader, or other assistive technology, a focusable-but-aria-hidden element creates an invisible "ghost" control they can accidentally activate with no context — causing confusion, errors, and abandoned purchases. Beyond the user experience impact, WCAG 4.1.2 is a Level AA requirement referenced by the ADA, Section 508, the European Accessibility Act (EAA), and many other laws; failing it exposes your store to legal complaints and audits. It also signals poor code quality to technical SEO crawlers and browser accessibility APIs, and accessibility lawsuits have become a significant liability for ecommerce brands of all sizes.

See the complete Aria hidden focus guide for every platform and the full background.