Warning Valor de tabindex positivo

Por qué los valores de tabindex mayores a 0 anulan el orden de tabulación natural del navegador, y la navegación por teclado confusa que resulta.

El validador marca cualquier elemento con un atributo tabindex definido en un valor mayor que 0.

Ejemplo

<!-- Marcado: fuerza que este campo se tabule primero -->
<input tabindex="1">

<!-- Correcto: 0 hace focusable un elemento en su orden natural de origen -->
<div tabindex="0" role="button">Control personalizado</div>

<!-- Correcto: confiar en el orden de tabulación por defecto para controles nativos -->
<input>

Por qué importa

Por defecto, la tecla Tab mueve el foco por una página en el orden del código fuente, que generalmente coincide con el orden de lectura visual. Un tabindex positivo saca a un elemento de ese orden y le da prioridad explícita — 1 antes que 2, 2 antes que 3, y así sucesivamente — antes que cualquier elemento sin ningún tabindex. En cualquier página con más de un valor positivo, mantener la numeración consistente a medida que la página evoluciona se vuelve frágil, y un solo valor fuera de lugar crea un salto brusco en la secuencia de tabulación que no tiene nada que ver con el layout visual. tabindex="0" es distinto y no se ve afectado por esta advertencia — hace focusable en su posición natural de orden de documento a un elemento que de otra forma no sería focusable (como un <div> actuando como botón), que es la forma estándar de construir controles personalizados accesibles.

Frequently asked questions

¿tabindex="0" también es un problema?

No — tabindex="0" es la forma recomendada de hacer focusable un elemento no interactivo en su posición normal de orden de origen, y esta revisión no lo marca. Solo se marcan los valores positivos (1, 2, 3, ...), ya que son los que alteran el orden.

¿Qué debería usar en vez de un tabindex positivo para reordenar el foco?

Reordenar el código HTML real para que el orden del DOM coincida con el orden de tabulación deseado. Esto mantiene correcto el orden de tabulación sin un esquema de numeración separado y difícil de mantener superpuesto al markup.