Fallo común Fallos comunes WCAG 2.2
F44Fallo del criterio de conformidad 2.4.3 debido a usar tabindex para crear un orden de tabulación que no conserva el significado ni la operabilidad
En resumen
Este fallo aparece cuando se asignan valores de tabindex que hacen que el foco salte entre enlaces y campos en un orden distinto al que tiene sentido en el contenido. Perjudica sobre todo a quienes navegan con teclado o lector de pantalla, que pierden el hilo de la página. Suele ocurrir al editar páginas sin actualizar los tabindex; lo más seguro es confiar en el orden del código fuente.
Ejemplo práctico
Suele verse en formularios de cita previa, contacto o registro en los que se fijó el orden con tabindex positivos y, al añadir después un campo, este queda fuera de la secuencia.
Así no: Formulario con tabindex positivos y un campo añadido después
Los campos llevan tabindex del 1 al 4, pero el campo Teléfono se añadió más tarde sin él. Al usar Tab, el orden es Nombre, Apellidos, Fecha de la cita, Pedir cita y, por último, Teléfono, que se salta y queda después del botón de envío.
<form action="#">
<p><label for="nombre">Nombre</label><br>
<input id="nombre" type="text" autocomplete="given-name" tabindex="1"></p>
<p><label for="apellidos">Apellidos</label><br>
<input id="apellidos" type="text" autocomplete="family-name" tabindex="2"></p>
<p><label for="tel">Teléfono</label><br>
<input id="tel" type="tel" autocomplete="tel"></p>
<p><label for="fecha">Fecha de la cita</label><br>
<input id="fecha" type="date" tabindex="3"></p>
<button type="submit" tabindex="4">Pedir cita</button>
</form>
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Así sí: Formulario sin tabindex: el orden sigue al código
Se eliminan todos los atributos tabindex. El orden de tabulación pasa a ser el del código fuente, que coincide con el orden visual y lógico: Nombre, Apellidos, Teléfono, Fecha de la cita y Pedir cita. Los campos que se añadan en el futuro quedarán en su sitio sin tocar nada más.
<form action="#">
<p><label for="nombre">Nombre</label><br>
<input id="nombre" type="text" autocomplete="given-name"></p>
<p><label for="apellidos">Apellidos</label><br>
<input id="apellidos" type="text" autocomplete="family-name"></p>
<p><label for="tel">Teléfono</label><br>
<input id="tel" type="tel" autocomplete="tel"></p>
<p><label for="fecha">Fecha de la cita</label><br>
<input id="fecha" type="date"></p>
<button type="submit">Pedir cita</button>
</form>Pruébelo aquí:
Cómo comprobarlo
Errores frecuentes en auditorías
- Poner
tabindex="1"en el buscador o en el botón de cookies para que reciban el foco primero, lo que obliga a recorrerlos antes que el enlace para saltar al contenido. - Formularios generados por plugins o constructores visuales que numeran los campos con
tabindexy se desordenan al añadir o mover campos. - Mezclar
tabindexpositivos en una ventana modal con el resto de la página, de modo que el foco salta fuera de la modal antes de terminarla. - Usar
tabindexpositivos para corregir un orden visual cambiado con CSS (order,flex-direction: row-reverse) en lugar de reordenar el código fuente.
Técnica completa: traducción al español del texto del W3C
Aplicabilidad
HTML
Descripción
Este documento describe un fallo que se produce cuando el orden de tabulación no sigue las relaciones y secuencias lógicas del contenido.
Los elementos que pueden recibir el foco, como los enlaces y los elementos de formulario, tienen un atributo tabindex. Los elementos reciben el foco en orden ascendente según el valor del atributo tabindex. Cuando los valores del atributo tabindex se asignan en un orden distinto al de las relaciones y secuencias del contenido, el orden de tabulación deja de seguir las relaciones y secuencias del contenido.
Una de las causas más habituales de este fallo se da al editar una página en la que se ha usado tabindex. Es fácil que el orden de tabulación y el orden del contenido dejen de corresponderse cuando se edita el contenido pero no se actualizan los atributos tabindex para reflejar los cambios realizados.
Ejemplos
El siguiente ejemplo usa tabindex de forma incorrecta para especificar un orden de tabulación alternativo:
<ol>
<li><a href="main.html" tabindex="1">Homepage</a></li>
<li><a href="chapter1.html" tabindex="4">Chapter 1</a></li>
<li><a href="chapter2.html" tabindex="3">Chapter 2</a></li>
<li><a href="chapter3.html" tabindex="2">Chapter 3</a></li>
</ol>Si se navega por esta lista con la tecla de tabulación, se recorre en el orden «Homepage», «chapter 3», «chapter 2», «chapter 1» (página de inicio, capítulo 3, capítulo 2, capítulo 1), que no sigue la secuencia del contenido.
En una página web se ha fijado explícitamente el orden de tabulación asignando atributos tabindex a todos los campos. Más adelante se modifica la página para añadir un campo nuevo en mitad de la página, pero quien la desarrolla olvida añadir un atributo tabindex al nuevo campo. Como resultado, el nuevo campo queda al final del orden de tabulación.
Pruebas
Procedimiento
- Si se usa tabindex, comprobar que el orden de tabulación especificado por los atributos tabindex sigue las relaciones existentes en el contenido.
Resultados esperados
- Si la comprobación n.º 1 es falsa, se da esta condición de fallo y el contenido falla el criterio de conformidad.
Recursos
Cómo lo comprobamos en ADDAW
Este fallo es uno de los que buscamos en cada auditoría de accesibilidad de ADDAW: lo documentamos con capturas y el código afectado, indicamos el criterio que incumple y la técnica suficiente con la que se corrige. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica F44 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
