Error Contenido interactivo anidado dentro de un enlace o botón
Por qué un <button> o un campo de formulario no puede vivir dentro de un <a>, y los errores de manejo de clics y accesibilidad que causa el anidamiento.
El validador marca un <a> o <button> que contiene otro enlace, botón o campo de formulario (input, select, textarea y similares) como descendiente.
Ejemplo
<!-- Incorrecto: botón dentro de un enlace -->
<a href="/producto/42">
Ver producto
<button>Agregar al carrito</button>
</a>
<!-- Correcto: hermanos, con estilo para verse relacionados -->
<div class="fila-producto">
<a href="/producto/42">Ver producto</a>
<button>Agregar al carrito</button>
</div>Por qué importa
La especificación HTML clasifica a los enlaces, botones y controles de formulario como "contenido interactivo", y su regla de modelo de contenido es que el contenido interactivo no puede contener otro contenido interactivo. Los navegadores no rechazan esto de forma uniforme durante el parseo como sí hacen con el anidamiento de la misma etiqueta (un <a> dentro de un <a> se cierra automáticamente por el parser), así que un <button> dentro de un <a> a menudo sí se renderiza — pero el manejo de clics se vuelve ambiguo, la navegación por teclado y lector de pantalla se vuelve confusa (¿qué control recibe el foco?, ¿cuál se activa con Enter?), y los navegadores varían en exactamente cómo resuelven el conflicto. Es un error frecuente en interfaces tipo tarjeta donde toda la tarjeta se envuelve en un enlace y después se agrega un botón de acción secundaria adentro.
Frequently asked questions
¿Por qué la página se sigue viendo bien si esto es inválido?
La mayoría de los navegadores van a renderizar los elementos interactivos anidados visualmente sin quejarse, así que es fácil pasarlo por alto. Los problemas reales aparecen en el comportamiento: objetivos de clic inconsistentes, lectores de pantalla anunciando un control anidado confuso, y un orden de foco de teclado que no coincide con lo que el usuario espera.
¿Cuál es el patrón correcto para una tarjeta clicable con un botón secundario?
Mantén el enlace y el botón como hermanos en vez de anidar uno dentro del otro, y usa CSS (un enlace posicionado de forma absoluta que cubra la tarjeta, o un layout flex/grid) para lograr el efecto visual de "toda la tarjeta es clicable" sin violar el modelo de contenido.