Orden de foco
Al recorrer una página con la tecla Tab, el orden de foco debe seguir una secuencia que preserve el significado y la operabilidad — en la práctica, el orden de lectura visual. Un orden de tabulación desordenado rompe la experiencia, aunque cada control funcione correctamente.
Qué exige este criterio
Un usuario de teclado que presiona Tab debe desplazarse por los elementos interactivos en un orden que le permita completar todas las tareas sin perder el contexto. En diseños de izquierda a derecha en español, eso equivale casi siempre a un recorrido de arriba a abajo y de izquierda a derecha. El orden no tiene que ser idéntico al visual, pero cualquier desviación debe preservar el significado: por ejemplo, un enlace «ir al pie de página» puede situarse fuera del flujo principal siempre que el resto del recorrido sea coherente.
El fallo que este criterio de conformidad apunta es el de los diálogos que ocultan el foco, las cuadrículas reordenadas por arrastrar con un orden de tabulación obsoleto, y el CSS que reordena el contenido visualmente dejando el DOM en su secuencia original.
Cómo cumplirlo
- Construir el DOM en el orden de lectura. Si el diseño visual difiere, usar con precaución las propiedades de orden de CSS Grid o Flexbox — pero es el orden del código fuente el que sigue Tab.
- Cuando se abre un modal, mover el foco al interior y mantenerlo atrapado dentro hasta que se cierre. Al cerrarse, restaurar el foco en el elemento que lo activó.
- No utilizar valores positivos de
tabindex(tabindex="3"). Generan órdenes personalizados que entran en conflicto con el DOM y se rompen en cuanto cambia la página. - Para listas con elementos reordenables mediante arrastrar y soltar, actualizar el orden del DOM para que coincida con el nuevo orden visual y mantener sincronizado el recorrido de tabulación.
- Comprobar el comportamiento pulsando Tab desde la barra de direcciones a través de todos los elementos enfocables de la página. Si en algún momento se pierde la orientación, los usuarios también la perderán.
Fallos habituales
- El modal se abre, pero el foco permanece en la página que hay detrás. Tab recorre elementos ocultos mientras el modal flota sin recibir atención.
- El menú móvil de cajón lateral se abre y el foco se queda en el cuerpo de la página. Los usuarios de lectores de pantalla no pueden encontrar lo que acaba de aparecer.
flex-direction: row-reverseinvierte el orden visual; el orden del DOM no cambia; Tab avanza ahora de derecha a izquierda mientras la lectura avanza de izquierda a derecha.- Valores de
tabindexpersonalizados dispersos por un formulario, con elementos añadidos posteriormente que heredantabindex="0"y quedan al final del recorrido. - Enfoque automático en una ventana emergente de «suscripción» que aparece 8 segundos después de la carga, arrancando el foco de quien estaba leyendo.
Por qué es importante
El orden de foco es el equivalente de teclado del orden de lectura. Cuando se rompe, la experiencia no es simplemente lenta — es incoherente. Los usuarios con discapacidades motoras que navegan exclusivamente con Tab y Shift+Tab pueden ser enviados a la sección incorrecta de un formulario, omitir un campo obligatorio por completo, o perder su lugar en una página larga tras un único control mal situado.