How to fix nested interactive on Webflow

Steps for Webflow

1. Open your project in the Webflow Designer.
2. In the Navigator panel (left sidebar), locate the offending component — typically a Collection List Item, a Link Block, or a Card component that contains a Button or another Link Block inside it.
3. Select the outer interactive wrapper (e.g. a Link Block). In the Settings panel (right sidebar) check its tag/element type.
4. Change the outer wrapper from a Link Block to a Div Block: right-click the element in the Navigator → 'Change tag' is not directly available, so instead: (a) add a new Div Block at the same level, (b) move all children into it, (c) delete the old Link Block, then (d) add the product title link as a separate Link element inside the new Div.
5. Ensure the Add to Cart button (from the Webflow Ecommerce Add to Cart component) and the title Link are direct children of the new Div, not nested inside each other.
6. Publish and test keyboard tab order in a browser.

<!-- ❌ WRONG: <a> wrapping a <button> — invalid nested interactive -->
<a href="/products/widget">
  <img src="widget.jpg" alt="Blue Widget">
  <span>Blue Widget</span>
  <button type="button">Add to Cart</button>  <!-- nested interactive! -->
</a>

<!-- ✅ CORRECT: non-interactive wrapper; link and button are siblings -->
<div class="product-card">
  <!-- Stretch the link to cover the card visually with CSS -->
  <a href="/products/widget" class="card-link">
    <img src="widget.jpg" alt="Blue Widget">
    <span>Blue Widget</span>
  </a>
  <!-- Button sits above the stretched link via z-index -->
  <button type="button" class="add-to-cart">Add to Cart</button>
</div>

<!-- CSS for the "full-card link" pattern -->
<style>
.product-card { position: relative; }
.card-link::after {
  content: '';
  position: absolute;
  inset: 0;          /* covers the full card */
  z-index: 0;
}
.add-to-cart { position: relative; z-index: 1; }
</style>

What is nested interactive?

WCAG Success Criterion 4.1.2 requires that every interactive component on a page has a clear name, role, and value that assistive technologies can understand. A "nested interactive" violation means a clickable or focusable element — like a button, link, or input — contains another focusable element inside it. For example, a product card that is wrapped in a `<a>` tag but also contains a separate "Add to Cart" `<button>` inside it, or a `<button>` that wraps a `<label>` and an `<input>`. HTML does not allow interactive elements to be nested inside other interactive elements — it is invalid markup that breaks predictable keyboard and screen-reader behavior.

Keyboard-only users and screen-reader users (blind shoppers, people with motor disabilities) navigate your store by tabbing through focusable elements. When interactive elements are nested, the browser renders the structure unpredictably: focus may skip the inner element, become trapped, or announce confusing information (e.g. reading an entire product card as one gigantic link). This directly prevents some customers from adding items to their cart, completing checkout, or using navigation menus — losing you real revenue. In many jurisdictions (US ADA, EU EAA, UK PSBAR) inaccessible ecommerce sites expose businesses to legal complaints and lawsuits. Fixing nested interactive elements is one of the most impactful keyboard-accessibility improvements you can make.

See the complete Nested interactive guide for every platform and the full background.