axe-core rule: nested-interactive

Interactive controls are nested inside each other

Fix reference | BarrierScan

What it is

An interactive element (such as a button or link) is placed inside another interactive element. Assistive technology and keyboards cannot reliably reach the inner control.

Who it blocks

Keyboard and screen reader users may be unable to activate the inner control at all, or may trigger the wrong one. Common on product cards where a whole card is a link containing an add-to-cart button.

How to fix it

Restructure so interactive elements are siblings, not parent and child. For card patterns, make the title the link and position the button alongside it.

Example fix

<!-- Before -->
<a href="/product/42" class="card">
  <h3>Office Chair</h3>
  <button>Add to cart</button>
</a>

<!-- After -->
<div class="card">
  <h3><a href="/product/42">Office Chair</a></h3>
  <button>Add to cart</button>
</div>

This is one of the barrier types BarrierScan checks for on every scan. Request a free accessibility scan to see whether it appears on your site, alongside the rest of the automated findings.