How to fix aria hidden focus on Squarespace

Steps for Squarespace

1. In Squarespace Admin, go to Website → Pages, then open the affected page in the editor.
2. Squarespace uses template-driven HTML you cannot fully edit natively. If the issue is in a **native Squarespace block** (e.g. a navigation menu or button block), report it to Squarespace Support as an accessibility defect in their templates.
3. If you have injected custom HTML via a Code Block or via Settings → Advanced → Code Injection, locate that code and fix the `aria-hidden` conflict directly in the code block.
4. For custom CSS or JS injections causing the issue, go to Website → Design → Custom CSS or Settings → Advanced → Code Injection and review any injected scripts that manipulate ARIA attributes.
5. After editing, preview and test 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.