Elementos interactivos anidados

Mensaje que muestran axe y Lighthouse: Interactive controls must not be nested · nested-interactive · WCAG 4.1.2

Qué significa y por qué importa

Un botón dentro de un enlace (o al revés) confunde al teclado y a los lectores de pantalla — el elemento interior a menudo no es accesible (WCAG 4.1.2).

Cómo corregirlo

Reestructura el código para que enlaces y botones estén uno al lado del otro y no anidados.

Ejemplo de código

Antes

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

Después

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

Todos los errores de accesibilidad