Addaw, ir a inicio Donar

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

  1. No use valores de tabindex mayores que 0.
  2. 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.
  3. 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.
  4. Use tabindex="0" solo para que un control propio reciba el foco en su orden natural. Use tabindex="-1" para darle el foco desde JavaScript.
  5. Si hereda una página con tabindex positivos, quítelos y reordene el código.

Cómo comprobarlo

  1. Busque en el código atributos tabindex con valores mayores que 0.
  2. Recorra la página con Tab y con Mayús + Tab.
  3. Compruebe que el foco sigue el orden de lectura y el orden visual, sin saltos.
  4. Si hay tabindex positivos, 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

  1. Comprobar si se usa tabindex
  2. Si se usa tabindex, comprobar que el orden de tabulación especificado por los atributos tabindex sigue las relaciones del contenido.

Resultados esperados

  • La comprobación n.º 2 es verdadera.

Recursos

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.

Solicitar una auditoría

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.