2.4.3 Orden de enfoque
Criterio de éxito oficial
Si se puede navegar secuencialmente por una página web y las secuencias de navegación afectan el significado o la operación, los componentes enfocables reciben el foco en un orden que preserva el significado y la operatividad.
Diferencia con 1.3.2
El criterio 1.3.2 Secuencia significativa trata sobre el orden de lectura del contenido. Este criterio, 2.4.3, trata específicamente sobre el orden en que los elementos interactivos reciben el foco con Tab.
¿Qué es?
Cuando un usuario navega con Tab, el foco debe moverse en un orden lógico: normalmente de izquierda a derecha, de arriba a abajo, siguiendo el flujo de lectura natural. Si el orden de foco no coincide con la estructura visual o lógica de la página, la navegación se vuelve confusa e impredecible.
¿Por qué es importante?
Un orden de foco incorrecto puede hacer que un formulario sea imposible de rellenar con teclado, que un diálogo modal quede inutilizable o que los usuarios pierdan el hilo de la interacción. La desorientación causada por saltos inesperados del foco es uno de los problemas de accesibilidad más frustrantes.
¿Quién se ve afectado?
Personas ciegas: Navegan secuencialmente con el lector de pantalla. Un orden de foco incorrecto les lleva a partes inesperadas de la página, perdiendo el contexto.
Personas con discapacidades motoras: Navegan exclusivamente con teclado, pedal o switch. Un orden de foco caótico hace inoperables partes del sitio.
Personas con discapacidades cognitivas: Un orden predecible reduce la carga cognitiva y hace la experiencia comprensible.
Cómo implementar 2.4.3
El orden del DOM es el orden del foco
El orden en que los elementos aparecen en el código HTML determina el orden de tabulación por defecto. Diseña el HTML con el orden correcto y evita usar CSS para reordenar visualmente sin actualizar el DOM.
<!-- ✓ Orden DOM = orden lógico del formulario -->
<label for="nombre">Nombre</label>
<input id="nombre" type="text">
<label for="email">Email</label>
<input id="email" type="email">
<button type="submit">Enviar</button>Valores de tabindex
Gestión de foco en modales
Cuando se abre un modal o diálogo, el foco debe moverse al primer elemento interactivo del modal. Al cerrarlo, el foco debe volver al elemento que lo activó.
// Al abrir el modal
modal.removeAttribute('hidden');
modal.querySelector('button, [href], input').focus();
// Al cerrar el modal
modal.setAttribute('hidden', '');
triggerButton.focus(); // devolver foco al disparadorEjemplos prácticos
Correcto Formulario con orden DOM lógico
Un formulario de registro tiene los campos en el orden visual: Nombre → Apellidos → Email → Contraseña → Botón. El HTML sigue exactamente el mismo orden, por lo que Tab funciona de forma natural.
Correcto Modal con gestión de foco
Al abrir un cuadro de diálogo de confirmación, el foco se mueve automáticamente al botón «Confirmar». Al cerrarlo (con «Cancelar» o Escape), el foco vuelve al botón que abrió el modal.
Fallo tabindex positivos que desordenan el Tab
Un formulario usa tabindex="3", tabindex="1", tabindex="2" en sus campos. El foco salta de la segunda columna a la primera, luego vuelve a la segunda, confundiendo a cualquier usuario de teclado.
Fallo Foco perdido al cerrar un modal
Un diálogo de confirmación se cierra pero el foco va al inicio del documento en lugar de volver al botón que abrió el modal. El usuario de teclado debe volver a recorrer toda la página.
Técnicas recomendadas
| Código | Técnica | Tipo |
|---|---|---|
| G59 | Colocar los elementos interactivos en un orden coherente con el flujo de lectura | Suficiente |
| H4 | Crear un orden lógico de tabulación con tabindex | Suficiente |
| C27 | Hacer que el orden del DOM coincida con el orden visual | Suficiente |
| SCR26 | Insertar el elemento dinámico en el DOM justo después del elemento que lo activa | Suficiente |
| SCR37 | Crear diálogos personalizados de forma accesible | Suficiente |
Errores comunes
- Usar CSS
orderoflex-direction: column-reversesin actualizar el orden del DOM. - No devolver el foco al elemento disparador al cerrar un modal.
- Elementos interactivos generados dinámicamente que aparecen al final del DOM aunque visualmente estén antes.