Mucha gente nunca toca un mouse: personas que usan teclado, lectores de pantalla o dispositivos de conmutación, y muchos usuarios avanzados. Recorren la página con Tab y Shift + Tab, y el orden de esas paradas es parte de tu diseño, lo hayas planeado o no.
Qué pide WCAG
El criterio 2.4.3 Orden del foco (nivel A) dice que si una página se puede recorrer en secuencia y el orden afecta el significado o el uso, los componentes que reciben foco deben hacerlo en un orden que conserve el significado y la operabilidad. En la mayoría de las pantallas eso significa simplemente que el foco sigue el orden visual de lectura.
- 2.4.3 Orden del foco (A): la secuencia tiene sentido.
- 2.4.7 Foco visible (AA): siempre se ve dónde está el foco.
- 2.4.11 Foco no oculto (AA, nuevo en WCAG 2.2): encabezados fijos, burbujas de chat y avisos de cookies no tapan el elemento enfocado.
- 2.1.1 Teclado (A): todo lo que funciona con mouse funciona con teclado.
Dónde suele romperse el orden
- Diseños reordenados con CSS:
order,flex-direction: row-reverseogrid-auto-flow: columncambian lo que se ve, no a dónde va el foco. - Elementos posicionados: un botón que se ve arriba en la pantalla pero está al final del HTML.
- tabindex positivo:
tabindex="1"se adelanta a todo lo demás en la página y casi nunca es lo que quieres. - Diálogos: el foco tiene que entrar al diálogo cuando se abre, quedarse dentro mientras está abierto y volver al botón que lo abrió cuando se cierra.
- Sin enlace para saltar: sin él, quien usa teclado recorre toda la navegación en cada página.
Diseñar la secuencia
El orden del foco es una decisión de diseño, así que va en la entrega a desarrollo, no solo en QA:
- Numera las paradas de foco en las pantallas clave y agrégalas como una capa de anotaciones en Figma.
- Lee la pantalla como un texto: de arriba abajo y de izquierda a derecha (de derecha a izquierda en idiomas RTL), grupo por grupo.
- Termina un grupo antes de pasar al siguiente: todos los campos de una fila del formulario, todos los enlaces de un menú.
- Decide dónde queda el foco después de una acción: al cerrar un diálogo, borrar una fila o cargar nuevos resultados.
En código
<!-- El primer elemento enfocable de cada página --> <a class="skip-link" href="#main">Saltar al contenido</a> <!-- tabindex: solo 0 y -1 --> <div role="button" tabindex="0">Control propio</div> <h2 id="results" tabindex="-1">Resultados</h2> <!-- enfocado por script -->
Mantén el HTML en orden de lectura y deja que CSS se encargue del diseño sin reordenar. Los botones, enlaces y campos nativos reciben foco gratis y traen el comportamiento de teclado correcto, así que úsalos antes que elementos propios.
Cómo probarlo
- Aparta el mouse y recorre la página con Tab, luego vuelve con Shift + Tab.
- Fíjate si el foco desaparece (un elemento oculto o fuera de la pantalla) o si salta a lugares que no coinciden con lo que ves.
- Abre cada diálogo y menú: el foco debe entrar, quedarse dentro y volver.
- Repite en anchos de móvil: los diseños que se reacomodan son donde más se rompe el orden.
Para practicar
Orden del Tab te da cinco pantallas para numerar en orden de Tab, desde un formulario de acceso hasta una página de ajustes, y explica la regla detrás de cada una.