Técnica HTML WCAG 2.2 obsoleta
H4Fijar el orden de tabulación con tabindex positivo (técnica obsoleta)
Nombre oficial en el W3C: Crear un orden de tabulación lógico entre enlaces, controles de formulario y objetos
Técnica obsoleta: el W3C ya no la recomienda. Manipulating focus order is discouraged, as it frequently introduces new accessibility issues.
En pocas palabras
Técnica obsoleta: hoy no se recomienda. Proponía usar el atributo tabindex con números (1, 2, 3…) para decidir en qué orden recibe el foco cada enlace o campo al pulsar Tab. Hoy se hace de otra manera: se ordena el código de la página para que el orden natural ya sea el lógico.
Por qué es importante
Muchas personas recorren la página con la tecla Tab: quien usa solo el teclado, un lector de pantalla u otros productos de apoyo. Necesitan que el foco (el elemento activo en cada momento) siga un orden con sentido.
El W3C retiró esta técnica porque cambiar el orden con tabindex positivo suele crear problemas nuevos. Los elementos con número pasan por delante de todos los demás. Si alguien añade un enlace sin número, el foco salta de forma extraña. Además, el lector de pantalla sigue leyendo en el orden del código, y lo que se oye deja de coincidir con lo que recibe el foco.
Cómo se hace
- No use valores de
tabindexmayores que 0. - Coloque en el código los enlaces, botones y campos en el orden lógico de uso. Por ejemplo, en un formulario de cita previa, primero los datos personales y luego la fecha.
- Si el diseño pide otra colocación, cambie la posición visual con CSS sin desordenar el código. Evite que lo que se ve y el orden del foco se contradigan.
- Use
tabindex="0"solo para que un control propio reciba el foco en su orden natural. Usetabindex="-1"para darle el foco desde JavaScript. - Si hereda una página con
tabindexpositivos, quítelos y reordene el código.
Cómo comprobarlo
- Busque en el código atributos
tabindexcon valores mayores que 0. - Recorra la página con Tab y con Mayús + Tab.
- Compruebe que el foco sigue el orden de lectura y el orden visual, sin saltos.
- Si hay
tabindexpositivos, compruebe al menos que el orden resultante sigue la lógica del contenido.
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 H4 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 y XHTML
Descripción
El objetivo de esta técnica es proporcionar un orden de tabulación lógico cuando el orden de tabulación predeterminado no es suficiente. A menudo, colocar los elementos interactivos en un orden que siga las secuencias y relaciones del contenido es suficiente y esta técnica no es necesaria. Es muy fácil introducir errores de usabilidad al establecer el orden de tabulación de forma explícita.
En algunos casos, el autor puede querer especificar un orden de tabulación que siga las relaciones
del contenido sin seguir el orden de los elementos interactivos en el código. En
esos casos, se puede especificar un orden alternativo mediante el atributo tabindex
del elemento interactivo. Al tabindex se le asigna un valor entre
0 y 32767.
Cuando se navega por los elementos interactivos con la tecla de tabulación, los elementos reciben
el foco en orden creciente según el valor de su atributo tabindex.
Los elementos cuyo valor de tabindex es mayor que 0 reciben el foco
antes que los elementos sin tabindex o con un tabindex de 0. Una vez que
todos los elementos con un tabindex mayor que 0 han recibido el foco, el resto de los
elementos interactivos reciben el foco en el orden en que aparecen en la página
web.
Ejemplos
Un formulario de búsqueda genealógica busca registros matrimoniales. El formulario de búsqueda incluye
varios campos de entrada para la novia y el novio. El formulario está marcado con una tabla
de datos que incluye los campos del novio en la primera columna y los campos de
la novia en la segunda columna. El orden en el contenido es fila por fila, pero el
autor considera más lógico recorrer el formulario columna por columna. De este modo, todos
los criterios del novio pueden rellenarse antes de pasar a los criterios de la novia. Los
atributos tabindex de los campos de entrada se usan para especificar un orden
de tabulación que recorre el formulario columna por columna.
<form action="#" method="post">
<table summary="the first column contains the search criteria of
the groom, the second column the search criteria of
the bride">
<caption>Search for marriage records</caption>
<tr>
<th>Search criteria</th>
<th>Groom</th>
<th>Bride</th>
</tr>
<tr>
<th>First name</th>
<td><input type="text" size="30" value="" name="groomfirst"
title="First name of the groom" tabindex="1"></td>
<td><input type="text" size="30" value="" name="bridefirst"
title="First name of the bride" tabindex="4"></td>
</tr>
<tr>
<th>Last name</th>
<td><input type="text" size="30" value="" name="groomlast"
title="Last name of the groom" tabindex="2"></td>
<td><input type="text" size="30" value="" name="bridelast"
title="Last name of the bride" tabindex="5"></td>
</tr>
<tr>
<th>Place of birth</th>
<td><input type="text" size="30" value="" name="groombirth"
title="Place of birth of the groom" tabindex="3"></td>
<td><input type="text" size="30" value="" name="bridebirth"
title="Place of birth of the bride" tabindex="6"></td>
</tr>
</table>
</form>
Una página web contiene un campo de búsqueda en la esquina superior derecha. Al campo se le asigna tabindex="1" para que sea el primero en el orden de tabulación, aunque no sea el primero en el orden del contenido.
Los valores de tabindex no tienen que ser consecutivos ni empezar por ningún
valor en particular. Tampoco tienen que ser únicos. Los elementos que tienen valores de
tabindex idénticos se recorren en el orden en que aparecen en el
flujo de caracteres.
En las secciones del contenido en las que el orden de tabulación sigue el orden del contenido, puede ser menos propenso a errores asignar a todos los elementos el mismo valor de tabindex que especificar un número distinto para cada elemento. Así resulta fácil reorganizar esos elementos o añadir otros nuevos y mantener un orden de tabulación lógico.
<a href="xxx" tabindex = "1">First link in list</a>
<a href="xxx" tabindex = "1">Second link in list</a>
<a href="xxx" tabindex = "1">Link that was added long
after the original list was created</a>
<a href="xxx" tabindex = "1">Third link in list</a>
...
<a href="xxx" tabindex = "1">Twentieth link in list</a>
Pruebas
Procedimiento
- Comprobar si se usa
tabindex - Si se usa
tabindex, comprobar que el orden de tabulación especificado por los atributostabindexsigue las relaciones del contenido.
Resultados esperados
- La comprobación n.º 2 es verdadera.
Recursos
- Tabbing navigation in the HTML 4.01 specification (navegación con tabulador en la especificación HTML 4.01)
Cómo lo comprobamos en ADDAW
En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.
Basado en la técnica H4 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.