How to fix aria hidden focus on PrestaShop

Steps for PrestaShop

1. In your PrestaShop back office, go to Design → Theme & Logo → your active theme.
2. Navigate to your theme directory on the server (typically `themes/<your-theme>/templates/`) and search for `aria-hidden` using your file manager or SSH: `grep -r 'aria-hidden' themes/<your-theme>/`.
3. Open the relevant `.tpl` (Smarty) file, locate the `aria-hidden="true"` on the parent container, and fix the markup so no focusable element is a descendant.
4. Clear the PrestaShop cache (Advanced Parameters → Performance → Clear Cache) and test on the storefront 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.