How to fix aria hidden focus on Magento Open Source

Steps for Magento Open Source

1. Follow the same steps as Adobe Commerce above — template paths and the override mechanism are identical in Magento Open Source.
2. Use `bin/magento cache:flush` after making template changes, and verify with axe DevTools or NVDA + Chrome.

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