Nested interactive

What it is

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.

Why it matters

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.

How to fix it

1. Identify the offending markup: locate the outer interactive element (e.g. a wrapping <a> or <button>) and the inner focusable descendant (e.g. a nested <button>, <a>, <input>, or element with tabindex='0') in your theme or page templates.
2. Decide which element should be the primary interactive control. In most ecommerce cases (e.g. a clickable product card), the correct pattern is a non-interactive container (e.g. a <div> or <li>) with a single visible interactive element (the product title as an <a>) rather than wrapping the entire card in an <a>.
3. Restructure the HTML so that interactive elements are siblings or cousins, never ancestors of one another. For a product card with both a title link and an Add to Cart button, place both as direct children of a non-interactive wrapper — do not wrap the whole card in an <a>.
4. If you need the entire card to appear clickable, use a CSS technique: make the title <a> fill the card visually with position:absolute/inset:0, and keep the Add to Cart <button> above it with a higher z-index and its own explicit focus style. This keeps the DOM valid while giving the visual affordance of a clickable card.
5. Verify no element has tabindex='0' or tabindex='-1' set on a child inside a native interactive element; remove those attributes or move the child outside the interactive parent.
6. Test the fix: tab through the affected component with a keyboard only (no mouse) and confirm focus lands on each control in a logical order with no skipped or trapped stops; then test with a screen reader (NVDA+Firefox or VoiceOver+Safari) to confirm each control is announced correctly.

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

Fix it on your platform

Pick your platform for the exact steps.

Frequently asked questions

Authoritative references

• How to fix this specific rule — Deque/axe (rule reference)
• WCAG 2 overview — W3C WAI
• ARIA basics — MDN