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

Acerca de este problema HTML

La especificación WAI-ARIA define reglas estrictas sobre qué elementos pueden ser hijos de roles interactivos. Un elemento con role="button" se trata como un control interactivo, y el elemento <a> (cuando tiene un href) también es un control interactivo. Anidar un elemento interactivo dentro de otro crea lo que se conoce como una violación de anidado de contenido interactivo. Los lectores de pantalla y otras tecnologías de asistencia no pueden determinar de manera confiable la intención del usuario cuando encuentran este patrón: ¿deberían anunciar un botón, un enlace, o ambos? El resultado es un comportamiento impredecible que puede hacer tu contenido inaccesible.

Este problema aparece comúnmente cuando los desarrolladores envuelven enlaces dentro de contenedores estilizados a los que se les ha dado role="button", o cuando usan librerías de componentes que aplican semántica de botón a elementos contenedores que contienen etiquetas anchor.

Más allá de la accesibilidad, los navegadores mismos manejan elementos interactivos anidados de manera inconsistente. Algunos pueden ignorar el rol interactivo exterior, mientras que otros pueden evitar que el enlace interior funcione correctamente. Esto hace que el patrón sea poco confiable incluso para usuarios que no dependen de tecnologías de asistencia.

Cómo solucionarlo

Hay varios enfoques dependiendo de tu intención:

Si el elemento debe navegar a una URL, usa un elemento <a> y dale estilo para que parezca un botón. Elimina el role="button" del padre o elimina completamente el contenedor padre.
Si el elemento debe realizar una acción (no navegación), usa un elemento <button> o un elemento con role="button", y maneja la acción con JavaScript. Elimina la etiqueta <a> anidada.
Si necesitas tanto un contenedor botón como un enlace, aplana la estructura para que sean hermanos en lugar de anidados.

Cuando uses role="button" en un elemento que no es botón, recuerda que también debes manejar la interacción por teclado (pulsaciones de teclas Enter y Space) e incluir tabindex="0" para hacerlo enfocable.

Ejemplos

❌ Incorrecto: enlace anidado dentro de un rol botón

<div role="button">
  <a href="/dashboard">Ir al Dashboard</a>
</div>

Esto desencadena el error de validación porque el <a> es descendiente de un elemento con role="button".

✅ Solución 1: usa un enlace estilizado en su lugar

Si la intención es navegación, elimina el rol botón y deja que el elemento <a> haga el trabajo. Dale estilo para que parezca un botón con CSS.

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

Esta es la solución más simple y semánticamente correcta cuando el propósito es navegar al usuario a otra página.

✅ Solución 2: usa un botón real para acciones

Si la intención es desencadenar una acción (no navegar), reemplaza toda la estructura con un elemento <button>.

<button type="button" class="btn" onclick="navigateToDashboard()">
  Ir al Dashboard
</button>

✅ Solución 3: usa un div con `role="button"` sin elementos interactivos anidados

Si necesitas un botón personalizado usando role="button", asegúrate de que no contenga descendientes interactivos.

<div role="button" tabindex="0">
  Ir al Dashboard
</div>

Cuando uses este enfoque, también debes agregar manejadores de eventos de teclado para Enter y Space para igualar el comportamiento de botón nativo.

❌ Incorrecto: enlace dentro de un elemento button

El mismo principio se aplica a elementos <button> nativos, no solo a elementos con role="button":

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

✅ Corregido: elige un elemento interactivo

<a href="/settings" class="btn">Configuración</a>

❌ Incorrecto: enlace profundamente anidado

El error se aplica a cualquier nivel de anidado, no solo a hijos directos:

<div role="button">
  <span class="icon-wrapper">
    <a href="/help">Ayuda</a>
  </span>
</div>

✅ Corregido: aplana la estructura

<a href="/help" class="btn">
  <span class="icon-wrapper">Ayuda</span>
</a>

Como regla general, cada elemento interactivo en tu página debe tener un rol único y claro. Si algo parece un botón pero navega a una URL, hazlo un <a> estilizado como botón. Si realiza una acción dentro de la página, hazlo un <button>. Mantener estos roles distintos asegura que tu HTML sea válido, accesible y se comporte de manera consistente en navegadores y tecnologías de asistencia.