Validación HTML: Un elemento con el atributo "role=button" no debe aparecer como descendiente del elemento "a".

Acerca de este problema HTML

La especificación HTML define reglas estrictas sobre qué elementos pueden anidarse dentro de otros. El elemento <a> se clasifica como contenido interactivo, y su modelo de contenido prohíbe explícitamente otros contenidos interactivos como descendientes. Los elementos con role="button" — ya sea un <button> nativo o cualquier elemento con el rol ARIA — también son interactivos. Anidar uno dentro del otro crea una situación ambigua: ¿un clic debería activar el enlace o el botón?

Esto importa por varias razones importantes:

Accesibilidad: Los lectores de pantalla y tecnologías de asistencia dependen de una jerarquía de elementos clara y sin ambigüedades. Cuando un botón está dentro de un enlace, el rol anunciado se vuelve confuso — los usuarios pueden escuchar tanto un enlace como un botón, o la tecnología de asistencia puede exponer solo uno de ellos, ocultando la funcionalidad del otro.
Comportamiento impredecible: Los navegadores manejan elementos interactivos anidados de manera inconsistente. Algunos pueden separar los elementos en el DOM, mientras que otros pueden absorber eventos de clic. Esto lleva a un comportamiento roto o poco confiable en diferentes navegadores.
Cumplimiento de estándares: Tanto el HTML Living Standard de WHATWG como la especificación HTML de W3C prohíben explícitamente este patrón de anidación.

Para solucionar este problema, decide qué debería hacer realmente el elemento. Si navega a una URL, usa un elemento <a>. Si realiza una acción (como enviar un formulario o activar JavaScript), usa un <button>. Si necesitas ambos estilos visuales, usa CSS para darle estilo a un elemento para que se vea como el otro.

Ejemplos

❌ Incorrecto: Elemento con `role="button"` dentro de un `<a>`

<a href="/dashboard">
  <span role="button">Ir al Panel</span>
</a>

El <span> con role="button" es contenido interactivo anidado dentro del elemento interactivo <a>.

❌ Incorrecto: `<button>` dentro de un `<a>`

<a href="/settings">
  <button>Abrir Configuración</button>
</a>

Un elemento <button> es inherentemente interactivo y no debe aparecer dentro de un <a>.

✅ Correcto: Usar un enlace con estilo de botón

Si el propósito es la navegación, usa el elemento <a> y dale estilo con CSS:

<a href="/dashboard" class="btn">Ir al Panel</a>

✅ Correcto: Usar un botón que navega mediante JavaScript

Si necesitas un botón que también navega, maneja la navegación en JavaScript:

<button type="button" onclick="location.href='/dashboard'">Ir al Panel</button>

✅ Correcto: Colocar elementos uno al lado del otro

Si realmente necesitas tanto un enlace como un botón, mantenlos como hermanos en lugar de anidar uno dentro del otro:

<div class="actions">
  <a href="/dashboard">Ir al Panel</a>
  <button type="button">Guardar Preferencia</button>
</div>

✅ Correcto: Enlace con estilo de botón usando ARIA (cuando sea apropiado)

Si el elemento navega pero quieres que las tecnologías de asistencia lo anuncien como un botón, puedes aplicar role="button" directamente al elemento — simplemente no lo anides dentro de un <a>:

<span role="button" tabindex="0" onclick="location.href='/dashboard'">
  Ir al Panel
</span>

Ten en cuenta que usar role="button" en un elemento no interactivo como <span> requiere que también agregues tabindex="0" para la capacidad de enfoque con teclado y manejes eventos keydown para las teclas Enter y Espacio. En la mayoría de los casos, un elemento nativo <a> o <button> es la mejor opción.