Esta traducción aún no ha sido revisada editorialmente. La versión alemana es la vinculante. Deutsche Fassung →
Barrierefreiheit
¿Qué significa el orden de foco en un sitio web?
El orden de foco es el orden en el que la tecla de tabulación dirige los controles de una página. Debe seguir el arreglo visible: de arriba a abajo, de izquierda a derecha. Si el foco salta en su lugar, los usuarios del teclado pierden la orientación — no pueden predecir dónde aterrizará la siguiente pulsación de tecla. El criterio WCAG 2.4.3 requiere un orden comprensible.
Cómo surge un orden de foco incorrecto
La tecla de tabulación sigue el orden de los elementos en el código fuente, no lo que se ve en la pantalla. Si el diseño mueve elementos a otras posiciones, ambos órdenes divergen: el foco salta del campo de nombre al pie de página y de vuelta al botón de envío. Los cuadros de diálogo insertados posteriormente también terminan a menudo al final del código fuente: quien quiera tabular hacia adentro primero debe pasar por el resto de la página. Un tercer clásico son números de tabulación fijos en el código fuente que fuerzan su propio orden, que colisiona con el diseño. Todo esto solo es visible en un recorrido real con el teclado.
Así mide el servicio de comprobación el orden de foco
El servicio de comprobación presiona la tecla de tabulación en su página y registra la posición de cada parada. Luego cuenta los saltos hacia atrás: lugares donde el foco salta significativamente hacia arriba o hacia la izquierda en la misma línea, contrariamente a la dirección de lectura. Si más del 30 por ciento de los cambios de foco son saltos hacia atrás, el criterio se considera violado; entre el 10 y el 30 por ciento, el informe señala un caso de prueba manual, ya que los diseños multicolumna pueden explicar saltos individuales. Por debajo de eso, el orden se considera comprensible. El informe indica el número de saltos hacia atrás y paradas comprobadas — ve la base de medición, no solo el veredicto.
Beispiele
Fokus springt durch tabindex
<input tabindex="3" name="name">
<input tabindex="1" name="email">
<button tabindex="2">Senden</button><input name="name">
<input name="email">
<button>Senden</button>Positive tabindex-Werte erzeugen eine eigene Reihenfolge, die von der sichtbaren abweicht. Die Quelltextreihenfolge ist die richtige.
- Tabule a través de su página más importante y observe la marca — ¿sigue la dirección de lectura de arriba a la izquierda hacia abajo a la derecha?
- Pruebe especialmente formularios: el orden de los campos por teclado debe corresponder al orden visible.
- Pida a su agencia que evite los números de tabulación fijos en el código fuente — el orden del código fuente debe ser el orden visible.
- Deje que los cuadros de diálogo pongan el foco en la ventana al abrirse y lo devuelvan a la ubicación original al cerrar.