Geneste interactieve elementen

Melding in axe en Lighthouse: Interactive controls must not be nested · nested-interactive · WCAG 4.1.2

Wat het betekent en waarom het belangrijk is

Een knop in een link (of andersom) verwart toetsenbord en schermlezers — het binnenste element is vaak onbereikbaar (WCAG 4.1.2).

Zo los je het op

Herschrijf de code zodat links en knoppen naast elkaar staan in plaats van in elkaar.

Codevoorbeeld

Voor

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

Na

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

Alle toegankelijkheidsfouten