Interactive elements nested inside each other

Message shown by axe and Lighthouse: Interactive controls must not be nested · nested-interactive · WCAG 4.1.2

What it means and why it matters

A button inside a link (or vice versa) confuses keyboards and screen readers — the inner control is often unreachable (WCAG 4.1.2).

How to fix it

Restructure the markup so that links and buttons are siblings, not nested.

Code example

Before

<a href="/product/42">
  Rain jacket <button>Add to cart</button>
</a>

After

<a href="/product/42">Rain jacket</a>
<button>Add to cart</button>

All accessibility errors