See plans and pricing

Putting one clickable element inside another — for example a link or a button nested inside another button — confuses screen readers and keyboard navigation about which control actually gets activated. This often happens on product cards where a whole card is wrapped in a link and a separate "Quick View" or "Add to Cart" button is placed inside that same link.

How to fix it

1. Find a <button> or <a> element that contains another focusable/interactive element inside it — commonly a product card <a> wrapping the whole card, with a <button> (e.g. "Add to Cart" or "Quick View") nested inside that same <a>.
2. Restructure the markup so the two controls are siblings instead of nested: place the "Add to Cart" <button> outside the product-title <a>, both inside a shared non-interactive wrapper like <div> or <li>.
3. If the design intent is "click anywhere on the card to view the product, except this specific button," use CSS to visually overlay the elements while keeping them siblings in the DOM (e.g. position the card link with an absolutely positioned pseudo full-card hit area, and keep the button as a separate sibling with a higher stacking order), rather than nesting one inside the other.
4. Do not place an <a> or <button> inside another <a> or <button>, and do not place a focusable element (tabindex="0") inside an element with role="button".
5. Tab through the reworked markup to confirm each control receives focus independently and that activating one does not also trigger the other.

<a href="/products/wallet" class="product-card">
  <img src="wallet.jpg" alt="Red leather wallet">
  <span>Red Leather Wallet</span>
  <button onclick="addToCart('wallet')">Add to Cart</button>
</a>

<div class="product-card">
  <a href="/products/wallet">
    <img src="wallet.jpg" alt="Red leather wallet">
    <span>Red Leather Wallet</span>
  </a>
  <button onclick="addToCart('wallet')">Add to Cart</button>
</div>

View the full rule reference from Deque University

See plans and pricing