Skip to content
StoreA11y

WooCommerce · 4.1.2 Name, Role, Value (Level A)

Interactive controls nested inside each other on WooCommerce

Some controls contain another control — a button inside a link, or a link inside a button. The keyboard focus order becomes ambiguous and screen readers announce a nonsensical merged name. On a store this is almost always the product card: the whole card is a link and the "Add to cart" or wishlist button sits inside it.

Which WCAG criterion this fails

  • Does not meet 4.1.2 Name, Role, Value (Level A)

How to fix it on WooCommerce

Everything below is done from Appearance > Theme File Editor, or your child theme over SFTP. Take a copy of the theme before editing.

  1. Stop wrapping the entire card in an <a>. Put the link on the product title only.
  2. To keep the whole card clickable visually, use the "stretched link" pattern: position the card relative, and give the title link an ::after pseudo-element covering the card. The button then sits above it with position:relative and z-index.
  3. The quick-add button must be a sibling of the title link, not a descendant.
  4. Same rule for the card image — it can be inside the title link, or a separate link, but never a link inside a link.

Where this usually lives

woocommerce/content-product.php override, and the loop add-to-cart button in woocommerce/loop/add-to-cart.php

Paths given for Storefront, Astra, Flatsome and other WooCommerce themes. A heavily customised theme may differ; the CSS selector in your scan report points at the exact element.

Code

<div class="card">
  <a class="card__title" href="{{ product.url }}">{{ product.title }}</a>
  <button class="card__quick-add" type="submit">Add to cart</button>
</div>

/* Whole card clickable without nesting */
.card { position: relative; }
.card__title::after { content: ""; position: absolute; inset: 0; }
.card__quick-add { position: relative; z-index: 1; }

How to confirm it is fixed

Re-run the scan. This rule should drop out of the findings entirely. If the instance count falls but does not reach zero, the same defect exists in another template — product cards and quick-view modals are the usual second home for it.

Effort: high. Rule id: nested-interactive (axe-core).