How to fix nested interactive on BigCommerce

Steps for BigCommerce

1. In your BigCommerce Admin go to Storefront → My Themes → (active theme) → Advanced → Edit Theme Files.
2. Product cards are in templates/components/products/card.html (Cornerstone theme). Open that file.
3. Search for a wrapping <a> or <button> that encloses another interactive element.
4. Apply the sibling restructure: change the outer wrapper to a <div>, keep the product title as its own <a>, and ensure the quick-add or wishlist buttons are siblings, not children of the title link.
5. Save and preview. Use the Stencil CLI locally for faster iteration if you have developer access.
6. Test keyboard tab order on the category/product listing pages.

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