How to fix aria hidden focus on Webflow

Steps for Webflow

1. Open the Webflow Designer for your project.
2. Select the element flagged by the scanner. In the right-hand Settings panel (the gear icon), scroll to the 'Custom Attributes' section.
3. If `aria-hidden` is set to `true` on a Div Block or Section that wraps a Button, Link, or Form element, either delete the `aria-hidden` attribute from that element, or restructure the layout so focusable elements are moved outside the hidden container.
4. For Symbols/Components: open the Symbol editor, make the fix inside the symbol, then save — the change will propagate to all instances.
5. Publish the site and verify with the axe DevTools browser extension on the published URL.

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