tabindex 0, -1 y nunca positivo

El atributo tabindex determina si un elemento puede recibir el foco del teclado y cómo encaja en el orden de Tabulación. Es el control que permite ajustar si un elemento puede recibir el foco.

Los enlaces, botones y entradas pueden recibir el foco de forma predeterminada, por lo que rara vez necesita modificar tabindex en ellos. Úselo solo cuando el elemento nativo no pueda cumplir la función.

Establecer tabindex="0" incorpora un elemento que normalmente no puede recibir el foco al orden natural de Tabulación, justo en el lugar que ocupa en el DOM.

Use tabindex="0" en un widget personalizado creado a partir de un div o span que deba ser accesible mediante el teclado, como un conmutador controlado por script.

Con tabindex="-1", el elemento se omite al pulsar Tab, pero aún puede recibir el foco desde JavaScript mediante element.focus().

Use tabindex="-1" para mover el foco a una región después de una acción, como un panel de resultados, sin añadirla a cada pulsación de Tab. 🎯

Un tabindex positivo, como 3, coloca ese elemento por delante de todos los demás, desordenando la secuencia y atrapándole en un laberinto. Evítelo.

Cualquier elemento con un valor positivo se visita antes que todos los elementos con tabindex="0" y los elementos predeterminados, por lo que el orden del foco deja de coincidir con el orden visual.

El orden de Tabulación más limpio proviene del propio orden del DOM. Organice el marcado de forma lógica y la mayoría de los problemas de foco desaparecerán por sí solos.

Añadir tabindex="0" a texto normal o a contenedores completos crea ruido y obliga a los usuarios de teclado a recorrer paradas que no hacen nada.

Use 0 para añadir un control personalizado al orden, -1 para enfocarlo únicamente mediante script y nunca un número positivo. Con eso cubre casi todos los casos.

Ahora controla el ajuste de tabindex: 0 añade controles personalizados al orden, -1 permite el foco mediante script y los valores positivos están prohibidos. 👍