Respuesta corta: tabindex decide si un elemento puede recibir el foco del teclado y en qué lugar cae cuando alguien pulsa Tab. Usa 0 para meter un control personalizado en el orden normal y -1 para los elementos a los que das el foco con un script. Evita los valores positivos: cambian el orden de la página.
Qué hace cada valor de tabindex
| Valor | Qué hace | Cuándo usarlo |
|---|---|---|
| tabindex="0" | Mete el elemento en el orden de tabulación, según el orden del código fuente | Un control personalizado que no tiene elemento nativo |
| tabindex="-1" | Lo saca del orden de tabulación; un script aún puede enfocarlo | Un mensaje de error o una sección a la que llevas el foco |
| tabindex="1" o más | Lo pone por delante de todas las demás paradas de tabulación | Nunca; arregla el orden del código fuente |
| Sin tabindex | Enlaces, botones, campos de formulario y summary conservan su lugar | Casi todo lo que hay en una página |
De MDN, web.dev y WebAIM, consultados el 5 de noviembre de 2026.
Cualquier valor válido de tabindex permite que un script o un clic del ratón den el foco al elemento; el valor decide si la tecla Tab llega a él. MDN recomienda usar solo 0 y -1.
Por qué los valores positivos rompen el orden
Un tabindex positivo pone el elemento por delante de todo lo que no lo lleva, y los números más altos van después. WebAIM dice que hay que evitar siempre estos valores, porque el orden deja de coincidir con lo que se ve y con lo que lee el lector de pantalla.
web.dev añade que es probable que así se incumpla el criterio 2.4.3 de las WCAG, que pide un orden del foco que conserve el sentido y el funcionamiento. El arreglo está en el HTML: pon los elementos en un orden lógico y deja la maquetación al CSS. MDN avisa contra el CSS que reordena elementos enfocables, como el orden de los elementos flex, por el mismo motivo.
Cuándo encaja tabindex="0"
tabindex="0" permite que un elemento que no puede recibir el foco, como un div o un span, entre en el orden de tabulación. web.dev lo reserva para controles interactivos: el contenido no necesita el foco para leerse, ni siquiera una imagen importante.
WebAIM añade que un elemento que se presenta como botón también tiene que responder a Enter y a Espacio. Además, suele necesitar un rol de ARIA para que el lector de pantalla sepa qué es. El consejo de MDN es más sencillo: usa un botón, un enlace o un campo de formulario de verdad, que traen sus roles y estados. Nuestra guía de botón o enlace te ayuda a elegir, y nuestra guía de qué es ARIA trata los roles.
tabindex="-1" para el foco que mueves con un script
Un valor de -1 deja el elemento fuera del orden de tabulación, pero permite que un script llame a focus() sobre él. Los ejemplos de MDN son una ventana modal que recibe el foco al aparecer y un mensaje de error que lo recibe cuando se envía un formulario con fallos. Un modal hecho con el elemento dialog es la excepción: MDN dice que no se debe usar tabindex en él, y web.dev recomienda dialog para los modales. Nuestra guía del elemento dialog muestra cómo hacer uno accesible.
web.dev lo usa en páginas que cambian de sección sin recargar: dale a la sección nueva tabindex="-1" y ponle el foco, para que quien usa el teclado llegue a donde cambió el contenido. WebAIM avisa en sentido contrario: nunca pongas -1 en un enlace o un botón al que la gente tiene que llegar. Un enlace para saltar también mueve el foco dentro de la página; nuestra guía de saltar al contenido principal explica cómo añadirlo.
Tabindex itinerante en widgets con flechas
Algunos widgets, como un grupo de pestañas o de botones de opción, funcionan como una sola parada de tabulación, y las flechas mueven el foco por dentro. La técnica del W3C para esto es el tabindex itinerante (roving tabindex): el elemento activo lleva tabindex="0" y todos los demás, -1.
Cuando una flecha mueve el foco, el script pone el elemento anterior en -1 y el nuevo en 0, y después llama a focus() sobre él. El W3C señala una ventaja: el navegador desplaza el elemento que recibe el foco hasta que se vea.
Cómo revisar el tabindex de una página
- Busca tabindex en el código de la página y apunta cada valor que encuentres.
- Quita todos los valores positivos y arregla el orden en el HTML.
- Quita el tabindex de enlaces, botones y campos de formulario, salvo que quites uno a propósito.
- Cambia cualquier div o span con tabindex="0" que actúe como botón por un botón de verdad.
- Deja el -1 para los elementos a los que das el foco con un script, como un mensaje de error, y nunca lo pongas en un elemento dialog.
- En los widgets con flechas, comprueba que solo un elemento sea parada de tabulación cada vez.
- Recorre la página con Tab y comprueba que el orden sigue el de lectura; la prueba completa está en nuestra guía de navegación con teclado.
Qué encontramos en nuestras páginas
El 5 de noviembre de 2026 buscamos tabindex en nuestra página de inicio, una guía y la página de contacto, en los dos idiomas. Lo hicimos tal como carga cada página para alguien que entra por primera vez. Ningún elemento usa un valor positivo, y ninguno usa tabindex="0" para hacer enfocable algo que no lo era.
Después pulsamos Tab 15 veces en cada página, y también en la de inicio con el ancho de un teléfono. Cada parada llegó en el orden del código fuente de la página. En pantalla ancha, las diez primeras fueron los dos enlaces para saltar, el logo, los cuatro apartados del menú, los dos enlaces de idioma y el botón del tema.
El botón del tema es un ejemplo. Es un elemento button, así que ocupa su lugar en el orden de tabulación sin ningún tabindex.
Antes de publicar
- Ningún elemento tiene un tabindex mayor que 0.
- Los enlaces, botones y campos de formulario no llevan tabindex, salvo que quites uno a propósito.
- Cada elemento con tabindex="0" es un control que funciona con el teclado.
- Cada elemento con tabindex="-1" es uno al que un script le da el foco.
- Los widgets con flechas son una sola parada de tabulación.
- El orden de tabulación sigue el orden de lectura.
RecuerdaLa mayoría de las páginas no necesitan ningún tabindex. Escribe el HTML en un orden lógico, usa botones y enlaces de verdad, y deja el 0 y el -1 para los pocos sitios que los necesitan.
En nuestro servicio de diseño web cuidamos el orden de tabulación de las páginas que hacemos.
Respuestas rápidas sobre tabindex
¿Qué hace tabindex="0"?
Mete un elemento en el orden normal de tabulación, según su lugar en el código de la página, y deja que un script le dé el foco. Úsalo en un control personalizado que no tiene elemento nativo; para algo que actúa como un botón, mejor un botón de verdad.
¿Qué hace tabindex="-1"?
Saca un elemento del orden de tabulación, pero un script aún puede darle el foco, por ejemplo a un mensaje de error cuando se envía un formulario con fallos. No lo pongas en un elemento dialog: MDN dice que ahí no se debe usar tabindex.
¿Por qué evitar los valores positivos de tabindex?
Un valor positivo pone el elemento por delante de todo lo demás en el orden de tabulación. WebAIM avisa de que el orden deja de coincidir con lo que se ve y con lo que lee el lector de pantalla. web.dev dice que es probable que incumpla el criterio 2.4.3 de las WCAG.
¿Los enlaces y los botones necesitan tabindex?
No. Los enlaces con href, los botones, los campos de formulario y el summary de un details ya están en el orden de tabulación. MDN dice que solo se les añada tabindex para cambiar eso, por ejemplo -1 para sacar uno a propósito.
¿Qué es un tabindex itinerante?
Una forma de que un grupo de elementos sea una sola parada de tabulación. El elemento activo lleva tabindex="0" y el resto -1; las flechas pasan el 0 y el foco al siguiente. El W3C señala que así el navegador desplaza cada elemento con el foco hasta que se vea.
Fuentes
Consultadas el 5 de noviembre de 2026. web.dev: Cómo usar tabindex. En inglés: MDN Web Docs, tabindex HTML global attribute; WebAIM, Keyboard Accessibility: Tabindex; Iniciativa de Accesibilidad Web del W3C, Developing a Keyboard Interface y Understanding Success Criterion 2.4.3: Focus Order. Nuestro caso: nuestras propias páginas, leídas en un navegador el 5 de noviembre de 2026.