Start scanning free

( Robust / WCAG 4.1.2 )

Interactive controls are nested inside each other

This check maps to Name, Role, Value. Use the guidance below to confirm the issue, understand who it affects and ship a fix.

Serious Level A WCAG 4.1.2 — Name, Role, Value

What’s wrong

An interactive element, like a button or link, contains another interactive element inside it, for example a <button> wrapping a <a>.

Why it matters

Browsers can’t reliably decide which control should receive a click or a keypress. Behavior varies across browsers, and screen readers may only expose one of the two controls, or neither correctly.

How to fix it

Flatten the structure so interactive elements sit next to each other instead of nested.

Before 
<button>
  <a href="/details">View details</a>
</button>
After 
<div class="card-actions">
  <a href="/details">View details</a>
</div>

Learn more