Fallo común WCAG 2.2
F44Orden de tabulación desordenado por usar tabindex con números
Nombre oficial en el W3C: Fallo 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 pocas palabras
El atributo tabindex con valores positivos (1, 2, 3…) cambia el orden en que se recorre la página con la tecla Tab. Si esos números no siguen el orden lógico del contenido, el foco salta de un sitio a otro sin sentido. Es un error frecuente al editar una página y olvidar renumerar.
Por qué es importante
Muchas personas usan solo el teclado: personas ciegas con lector de pantalla, personas con poca movilidad en las manos o quien prefiere no usar ratón. Con la tecla Tab pasan de un enlace o campo al siguiente.
Si el orden salta sin lógica, la persona pierde el hilo. En un formulario de cita previa puede llegar a la fecha antes que al nombre. O puede llegar al botón «Enviar» sin haber pasado por un campo.
Cómo evitarlo
- Deje que el orden lo marque el código: coloque los elementos en el HTML en el mismo orden en que deben recorrerse.
- No use valores de
tabindexmayores que 0. Los elementos con número positivo van siempre antes que el resto de la página. - Use
tabindex="0"solo para que un control propio reciba el foco en su posición natural. Usetabindex="-1"para darle el foco solo desde un script. - Si el diseño cambia el orden visual con CSS, reordene el HTML en lugar de corregirlo con
tabindex. - Si hereda una página con
tabindexpositivos, quítelos. Si no es posible, revise toda la numeración cada vez que añada o mueva un elemento.
Ejemplo práctico
Es habitual en formularios de cita previa, contacto o registro. El orden se fijó con tabindex positivos. Después se añadió un campo, que quedó 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. El campo Teléfono se añadió más tarde, sin tabindex. Con Tab, el orden es Nombre, Apellidos, Fecha de la cita y Pedir cita. Teléfono se salta y llega el último, después del botón de envío.
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Ver el código del ejemplo incorrecto
<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>Así sí: Formulario sin tabindex: el orden sigue al código
Se quitan todos los tabindex. Ahora el orden de tabulación es el del código. 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.
Pruébelo aquí:
Ver el código del ejemplo correcto
<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>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. Así hay que pasar por ellos antes que por el enlace para saltar al contenido. - Formularios de plugins o constructores visuales que numeran los campos con
tabindex. Al añadir o mover campos, el orden se desordena. - Mezclar
tabindexpositivos en una ventana modal y en el resto de la página. El foco sale de la modal antes de terminarla. - Corregir con
tabindexpositivos un orden visual cambiado con CSS (order,flex-direction: row-reverse). Lo correcto es reordenar el código fuente.
Ver el texto completo del W3C (traducción al español)
Esta es una traducción no oficial al español de la técnica F44 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web 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 error es uno de los que buscamos en cada auditoría de ADDAW. Se lo entregamos con capturas y la forma de corregirlo.
Basado en la técnica F44 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.