TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Evita inyectar valores mayores a cero (tabindex="1", tabindex="2", etc.) en tus elementos interactivos. Esto destruye la secuencia lógica de navegación para las personas usuarias que dependen del teclado, forzándolos a saltar por la pantalla de manera impredecible.
La destrucción del orden natural del DOM
El orden de tabulación nativo está determinado por el flujo natural del DOM (Document Object Model). Cuando asignas un valor de tabindex mayor a cero a un elemento, el navegador saca ese elemento del flujo normal y lo coloca al principio de la cola de navegación, sin importar su posición visual en la pantalla. Esto viola el Criterio de Conformidad 2.4.3 (Orden del Foco).
El patrón erróneo: Código Accesible Deficiente
Forzar el orden de foco con tabindex positivo crea una experiencia caótica donde el foco salta de la cabecera al pie de página, y luego al medio de la pantalla.
<!-- MAL: Alteración del flujo natural con tabindex positivo -->
<div class="sidebar">
<a href="/perfil" tabindex="2">Mi Perfil</a>
</div>
<div class="main-content">
<button tabindex="1">Acción Principal</button>
<a href="/ajustes" tabindex="3">Ajustes</a>
</div>La Solución Accesible: Código Recomendado
Ordena los elementos en el DOM de manera que su secuencia coincida con el orden visual y lógico. Usa tabindex="0" solo cuando necesites hacer enfocable un elemento no interactivo (y asegúrate de darle semántica).
<!-- BIEN: Flujo natural del DOM (tabindex implícito) -->
<div class="main-content">
<button>Acción Principal</button>
</div>
<div class="sidebar">
<a href="/perfil">Mi Perfil</a>
<a href="/ajustes">Ajustes</a>
</div>Matriz de Soporte y Comportamiento
| Método de Navegación | Comportamiento con Tabindex > 0 | Comportamiento Nativo |
|---|---|---|
| Teclado (Tecla Tab) | Salta erráticamente siguiendo el valor numérico, desorientando a la persona usuaria. | Sigue un flujo lógico de izquierda a derecha y de arriba a abajo. |
| Lector de Pantalla | El orden de lectura (flechas) difiere del orden de tabulación, causando confusión. | El orden visual, de lectura y de tabulación están sincronizados. |
Metodología de Verificación y Testing
Pruebas Manuales con Teclado
Navega por la página utilizando únicamente la tecla Tab. Verifica que el indicador de foco se mueva de forma secuencial y predecible (generalmente de arriba hacia abajo y de izquierda a derecha). Si el foco salta de repente a otra sección inesperada, es probable que haya un tabindex positivo interviniendo.
Inspección en DevTools
Puedes ejecutar un pequeño script en la consola de tu navegador para encontrar infractores: document.querySelectorAll('[tabindex]:not([tabindex="0"]):not([tabindex="-1"])'). Esto listará todos los elementos que tienen un tabindex mayor a cero.
Herramientas Automatizadas
La extensión Axe DevTools para Chrome marcará como un problema serio cualquier uso de tabindex mayor a 0 bajo la regla tabindex.
