La implementación de un orden de tabulación lógico es una parte importante para proporcionar a tus usuarios una experiencia de navegación con el teclado fluida. Los lectores de pantalla y otras tecnologías de asistencia navegan por la página en orden del DOM. El flujo de la información debe tener sentido.
Cómo probarlo manualmente
Para verificar si el orden de tabulación de tu aplicación es lógico, maneja tu página con el tabulador. En general, el enfoque debe seguir el orden de lectura, y se desplaza de izquierda a derecha, de la parte superior a la parte inferior de la página.
Existen dos ideas principales que debes tener en cuenta al evaluar el orden de tabulación:
- ¿Los elementos del DOM están organizados en un orden lógico?
- ¿El contenido fuera de pantalla se oculta correctamente de la navegación?
Observa cualquier salto en la navegación que parezca brusco. Además, observa los saltos fuera de la pantalla, en los que el tabulador te lleva al contenido que no está destinado a ser visible.
Obtén más información en Aspectos básicos de acceso al teclado.
Cómo corregirlo
Si el orden del foco parece incorrecto, debes reorganizar los elementos en el DOM para que el orden de tabulación sea más natural.
Si usaste CSS para cambiar la posición de los elementos visualmente, los usuarios de tecnología de asistencia experimentarán una navegación sin sentido. En lugar de usar CSS, mueve el elemento a una posición anterior en el DOM.
Si los controles del teclado aún pueden acceder al contenido fuera de la pantalla, considera quitarlo con tabindex="-1".
Obtén más información en Cómo controlar el enfoque con tabindex.
Recursos
El código fuente de la auditoría El orden visual en la página sigue el orden del DOM