How to fix nested interactive on Shopify

Steps for Shopify

1. In your Shopify admin, go to Online Store → Themes → your active theme → Actions → Edit code.
2. Open the Liquid template or section file where the nested element appears (common locations: sections/header.liquid, sections/featured-collection.liquid, snippets/product-card.liquid, snippets/cart-drawer.liquid).
3. Search for patterns like `<a ...><button` or `<button ...><a ` in the code editor (use Cmd/Ctrl+F).
4. Refactor the markup: keep only one interactive element and replace the other with a styled `<span>` or `<div>`, or merge both into a single `<a>` or `<button>` element with equivalent styling.
5. Click Save, then preview your storefront. Use browser DevTools → Accessibility tab to confirm no nesting warning appears, and test keyboard navigation with the Tab key.

What is nested interactive?

WCAG Success Criterion 4.1.2 requires that every user interface component has a name, role, and value that assistive technologies (like screen readers) can reliably understand. A "nested interactive" violation occurs when one interactive element — such as a `<button>`, `<a>`, `<select>`, or `<input>` — is placed inside another interactive element in the HTML. For example, putting a `<button>` inside an `<a>` tag, or an `<a>` link inside a `<button>`. HTML forbids this nesting, browsers handle it inconsistently, and screen readers and keyboard navigation can behave unpredictably. Adding `tabindex="-1"` or `aria-hidden="true"` to the inner element does NOT reliably hide it from assistive technology — screen readers can still discover and announce it, creating a confusing or broken experience.

Keyboard-only users and screen-reader users (a significant and legally protected segment of shoppers) can get stuck, confused, or blocked from completing a purchase when interactive controls are nested. In many jurisdictions — including the US (ADA), EU (EN 301 549), and UK (Equality Act) — inaccessible ecommerce stores face real legal exposure including complaints, audits, and lawsuits. Beyond legal risk, a broken checkout button or unclickable product link directly costs you conversions and revenue. Google also uses accessibility signals as a quality indicator, so fixing these issues can modestly improve crawlability and organic rankings over time.

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