Un orden de tabulación lógico es importante para que los usuarios tengan una experiencia de teclado fluida. Los lectores de pantalla y otras tecnologías de asistencia navegan por la página en orden de DOM. El flujo de información debería tener sentido.
Cómo realizar pruebas manuales
Para verificar si el orden de tabulación de tu aplicación es lógico, intenta navegar con tabulación por la página. En general, el enfoque debe seguir el orden de lectura, de la parte superior a la inferior de la página. En la mayoría de los idiomas, el orden de lectura se mueve de izquierda a derecha. En algunos, como el árabe y el hebreo, el orden de lectura se mueve de derecha a izquierda.
Hay dos ideas principales que debes tener en cuenta cuando evalúes el orden de tabulación:
- ¿Los elementos del DOM están organizados en un orden lógico?
- ¿El contenido fuera de pantalla está oculto correctamente de la navegación?
Observa si hay saltos en la navegación que parezcan bruscos. También observa los saltos fuera de pantalla, en los que presionar Tab te lleva a contenido que no debería ser visible.
Obtén más información en Aspectos básicos del acceso al teclado.
Cómo corregirlo
Si el orden de enfoque parece incorrecto, reorganiza los elementos en el DOM para que el orden de tabulación sea más natural.
Evita usar CSS para reposicionar elementos visualmente, ya que los usuarios de tecnología de accesibilidad 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
Código fuente de la auditoría El orden visual en la página sigue la auditoría de DOM