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

Acerca de este problema HTML

El elemento <a> es un elemento de contenido interactivo — ya es enfocable y navegable por teclado por defecto. Cuando colocas un elemento con un atributo tabindex dentro de un enlace, creas un objetivo de enfoque anidado. Esto significa que los usuarios de teclado y los lectores de pantalla encuentran dos (o más) elementos enfocables donde solo se esperaba uno. El navegador puede no manejar esto de manera consistente, y la experiencia del usuario se vuelve impredecible: ¿debería presionar Enter activar el enlace, o el elemento enfocable interno?

La especificación HTML define que ciertos elementos interactivos no deben estar anidados dentro de otros elementos interactivos. El modelo de contenido de un elemento <a> prohíbe explícitamente el contenido interactivo como descendientes. Agregar tabindex a cualquier elemento lo hace interactivo (enfocable), lo que viola esta regla.

Esto importa por varias razones:

Accesibilidad: Los lectores de pantalla pueden anunciar elementos enfocables anidados de maneras confusas, o saltárselos completamente. Los usuarios que dependen de la navegación por teclado pueden quedarse atrapados o confundidos por paradas de tabulación inesperadas dentro de un enlace.
Cumplimiento de estándares: El validador W3C marca esto como un error porque viola el modelo de contenido HTML para elementos de ancla.
Inconsistencia del navegador: Diferentes navegadores pueden manejar elementos enfocables anidados de manera diferente, llevando a comportamientos impredecibles entre plataformas.

Para solucionar este problema, tienes algunas opciones:

Elimina el atributo tabindex del elemento descendiente si no necesita ser enfocable de manera independiente.
Reestructura tu marcado para que el elemento enfocable sea un hermano del elemento <a> en lugar de un descendiente.
Repiensa el diseño — si necesitas múltiples objetivos interactivos en la misma área, considera usar elementos separados estilizados para aparecer como una sola unidad.

Ejemplos

❌ Inválido: Elemento con `tabindex` dentro de un elemento `<a>`

<a href="/products">
  <div tabindex="0">
    <h2>Our Products</h2>
    <p>Browse our full catalog</p>
  </div>
</a>

El <div> tiene tabindex="0", haciéndolo enfocable dentro de un elemento <a> que ya es enfocable. Esto crea objetivos de enfoque en conflicto.

✅ Corregido: Eliminar `tabindex` del descendiente

<a href="/products">
  <div>
    <h2>Our Products</h2>
    <p>Browse our full catalog</p>
  </div>
</a>

Dado que el elemento <a> ya es enfocable y clickeable, el <div> interno no necesita su propio tabindex. Eliminarlo resuelve el conflicto.

❌ Inválido: `span` con `tabindex` dentro de un enlace

<a href="/profile">
  <span tabindex="-1">User Name</span>
</a>

Incluso tabindex="-1" (que elimina el elemento del orden natural de tabulación pero aún lo hace enfocable programáticamente) desencadena este error de validación cuando se usa dentro de un elemento <a>.

✅ Corregido: Eliminar `tabindex` del `span`

<a href="/profile">
  <span>User Name</span>
</a>

❌ Inválido: Elemento tipo botón anidado dentro de un enlace

<a href="/dashboard">
  <div tabindex="0" role="button">Settings</div>
</a>

✅ Corregido: Separar los elementos interactivos

<div class="card-actions">
  <a href="/dashboard">Dashboard</a>
  <button type="button">Settings</button>
</div>

Si realmente necesitas dos elementos interactivos distintos, colócalos como hermanos en lugar de anidar uno dentro del otro. Usa CSS para estilizarlos como una unidad visual cohesiva si es necesario.