Nested interactive
Moderate effortFound on 30% of audited stores.
Remove or restructure nested interactive elements so that no focusable control (button, link, input, etc.) is placed inside another interactive control, and never rely on tabindex="-1" or aria-hidden="true" to hide an inner interactive element from assistive technologies.
What it is
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.
Why it matters
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.
How to fix it
- Identify every instance where an interactive element (button, a, input, select, textarea, details, summary, label wrapping an input with a click handler) contains another interactive element in your HTML source.
- Decide which element should be the single interactive control. In most cases one of the two nested elements is decorative or redundant — for example, an icon `<button>` wrapped in an `<a>` tag, where only one action is needed.
- Restructure the markup so the two elements are siblings or one replaces the other entirely — never one inside the other. For example, replace `<a href='...'><button>Buy now</button></a>` with simply `<a href='...' class='btn'>Buy now</a>` styled as a button.
- Remove any tabindex='-1' or aria-hidden='true' that was applied to the inner element as a workaround — these do not reliably suppress the element from assistive technologies and are no longer needed once the nesting is resolved.
- If you genuinely need a visual element (icon, badge, label) inside a button or link, use a non-interactive element such as `<span>` or `<svg aria-hidden='true'>` — these are fine inside interactive controls; only another interactive element is forbidden.
- Test the fix with a keyboard (Tab key to navigate, Enter/Space to activate) and with a free screen reader such as NVDA (Windows) or VoiceOver (Mac/iOS) to confirm only one control is announced and activated per intended action.
Fix it on your platform
Pick your platform for the exact steps.
How to fix nested interactive on Shopify
- In your Shopify admin, go to Online Store → Themes → your active theme → Actions → Edit code.
- 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).
- Search for patterns like `<a ...><button` or `<button ...><a ` in the code editor (use Cmd/Ctrl+F).
- 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.
- 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.
How to fix nested interactive on Shopify Plus
- In your Shopify admin, go to Online Store → Themes → your active theme → Actions → Edit code (or use GitHub integration if your theme is version-controlled).
- Search all Liquid section and snippet files for nested interactive patterns (`<a ...><button`, `<button ...><a `, `<a ...><input`, etc.).
- Edit each offending file: restructure so only one interactive element exists per intended action. Convert the outer or inner element to a non-interactive `<span>` or `<div>` as appropriate.
- If using a headless or custom storefront (Hydrogen/Oxygen), edit the React/JSX component directly and apply the same single-interactive-element rule.
- Save, deploy, and verify with axe DevTools browser extension or keyboard-only navigation.
How to fix nested interactive on WooCommerce
- In your WordPress admin, go to Appearance → Theme Editor (or use a code editor / FTP client) and locate the theme template responsible for the affected component — commonly woocommerce/content-product.php, woocommerce/loop/add-to-cart.php, or a custom block/widget.
- If your theme uses a block editor (FSE), go to Appearance → Editor, navigate to the template containing the issue, and inspect the block markup in Code Editor view (three-dot menu → Code editor).
- Search for `<a` or `<button` tags that wrap another `<a>` or `<button>`. Refactor so only one interactive element wraps the action.
- If the nesting comes from a WooCommerce core template override, copy the template to your child theme under /woocommerce/ and edit it there so updates don't overwrite your fix.
- Install the axe DevTools browser extension and re-scan the fixed page to confirm the violation is gone.
How to fix nested interactive on BigCommerce
- In your BigCommerce admin, go to Storefront → Themes → your active theme → Advanced → Edit Theme Files (Stencil CLI or Page Builder).
- Open the Handlebars template file for the affected component — common files: templates/components/products/card.html, templates/components/cart/item.html, templates/layout/base.html.
- Search for nested interactive patterns and refactor: replace the inner or outer interactive tag with a non-interactive `<span>` or `<div>`, keeping only one focusable control per action.
- Save and push the updated theme. Preview the storefront and test with Tab-key navigation to confirm only one interactive element is focused per action.
How to fix nested interactive on Wix
- Open the Wix Editor for your site. Click on the component that contains the nested interactive elements.
- If the component is a built-in Wix widget (e.g., a Button inside a Repeater card that is itself clickable), remove one of the interactive behaviors: either remove the card's click action or remove the button, not both.
- For Wix Velo (custom code) sites, open the relevant page code or a custom HTML component (Add → Embed → HTML iframe) and edit the markup directly to eliminate nesting.
- If using a Wix App Market widget that produces the nested markup and cannot be edited, contact the app developer or replace the widget with a custom HTML embed where you control the markup.
- Preview the page and use browser DevTools → Lighthouse → Accessibility or the axe extension to verify the fix.
How to fix nested interactive on Wix Studio
- In Wix Studio, select the affected element on the canvas and open its Settings / Interactions panel.
- If a container (card, section) has an on-click action AND contains a Button element, remove the redundant interaction from whichever wrapper is not the primary CTA.
- For custom-coded components in Wix Studio's Dev Mode, open the component's JSX/HTML and restructure to place only one interactive element per action.
- Test with the Studio Preview and keyboard Tab navigation before publishing.
How to fix nested interactive on Squarespace
- In your Squarespace admin, go to Pages → [affected page] → Edit. Identify the block containing the nested interactive element.
- If the issue is in a Button block inside a Clickable element block, remove the clickable behavior from the outer container — keep only the Button block as the interactive control.
- For custom code injected via Settings → Advanced → Code Injection or a Code Block, edit the HTML directly: remove the nested interactive tag and replace it with a `<span>` or style the remaining single element as needed.
- If the nesting comes from a third-party Squarespace plugin/extension, contact the developer or replace it with a custom Code Block where you control the markup.
- Save and preview. Use the axe browser extension to confirm the violation is resolved.
How to fix nested interactive on Webflow
- In the Webflow Designer, open the Navigator panel (left sidebar) and locate the nested interactive structure — e.g., a Button element inside a Link Block, or a Link Block inside another Link Block.
- Select the outer interactive element and change its tag/type to a non-interactive Div Block (Element Settings → Tag: div) if it was only providing layout, keeping the inner interactive element as the actual control.
- Alternatively, select the inner interactive element and change its type to a Div Block styled identically, leaving only the outer Link Block or Button as the interactive control.
- Never place a Button element inside a Link Block or a Link Block inside another Link Block in Webflow's element tree.
- Publish the site and verify in the browser with Tab-key navigation and the axe DevTools extension.
How to fix nested interactive on Adobe Commerce (Magento)
- Identify the PHTML template or UI Component file responsible for the affected element — common paths: app/design/frontend/<Vendor>/<Theme>/Magento_Catalog/templates/product/list.phtml, Magento_Checkout/templates/cart/item/default.phtml.
- Open the file in your code editor. Search for `<a` or `<button` tags that contain another `<a>` or `<button>` tag.
- Refactor the markup: replace the redundant inner or outer interactive element with a `<span>` with equivalent CSS classes, keeping a single interactive element per intended action.
- If the issue is in a JavaScript/Knockout or React component (PWA Studio/Venia), locate the .jsx/.js component file and apply the same single-interactive-element rule to the JSX return.
- Run `bin/magento cache:clean` and `bin/magento setup:static-content:deploy`, then test in the browser with keyboard navigation and the axe extension.
How to fix nested interactive on Magento Open Source
- Locate the PHTML template responsible for the affected UI — check app/design/frontend/<Vendor>/<Theme>/ first, then vendor/magento/module-*/view/frontend/templates/.
- Search the template for nested `<a>` inside `<button>` or `<button>` inside `<a>` patterns.
- Refactor by converting the inner interactive element to a `<span>` or by merging both into a single element. Use CSS to preserve the visual appearance.
- Clear the Magento cache (bin/magento cache:flush) and redeploy static content, then verify with Tab-key navigation.
How to fix nested interactive on PrestaShop
- In your PrestaShop back office, go to Design → Theme & Logo → [your theme] and use FTP or the Theme Editor to locate the affected template file (commonly themes/<yourtheme>/templates/catalog/_partials/miniatures/product.tpl or checkout/).
- Open the .tpl (Smarty) file and search for nested interactive elements.
- Refactor: replace one of the two interactive elements with a `<span>` or `<div>`, preserving visual styles.
- Clear PrestaShop's Smarty cache under Advanced Parameters → Performance → Clear Cache, then verify the fix.
How to fix nested interactive on Headless / Custom (I build in code)
- Search your component codebase for patterns where interactive HTML elements are children of other interactive elements: `<a><button`, `<button><a`, `<a><input`, `<button><select`, etc. Use grep or your IDE's global search.
- Refactor each component: decide which element is the primary interactive control, keep it, and replace the other with a non-interactive element (`<span>`, `<div>`, `<svg aria-hidden='true'>`) that is styled to look identical.
- Remove any tabindex='-1' or aria-hidden='true' that was masking the inner element — these are not reliable fixes and are no longer needed.
- Add a lint rule (e.g., eslint-plugin-jsx-a11y rule 'no-interactive-element-to-noninteractive-role' and 'interactive-supports-focus') to your CI pipeline to catch regressions automatically.
- Run axe-core or Playwright accessibility checks in your test suite against the affected pages to confirm zero nested-interactive violations before merging.
Does your site have this issue?
Run a free SEOLZ scan to find nested interactive — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
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.
Why does nested interactive matter?
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.
How do I fix nested interactive?
Remove or restructure nested interactive elements so that no focusable control (button, link, input, etc.) is placed inside another interactive control, and never rely on tabindex="-1" or aria-hidden="true" to hide an inner interactive element from assistive technologies.
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI
- ARIA basics — MDN