Muchos usuarios diferentes dependen del teclado para navegar por las aplicaciones, desde usuarios con discapacidades motoras temporales y permanentes hasta usuarios que usan combinaciones de teclas para ser más eficientes y productivos. Un orden de tabulación lógico es una parte importante para brindar una experiencia de navegación fluida con el teclado.
Cómo realizar pruebas manuales
Para verificar si el orden de tabulación de tu aplicación es lógico, intenta desplazarte por la página con la tecla Tab. El orden en el que se enfocan los elementos debe seguir el orden del DOM. En general, el enfoque debe seguir el orden de lectura, de izquierda a derecha, de la parte superior a la inferior de la página.
Obtén más información en Conceptos básicos del acceso con el teclado.
¿Puedes acceder a todos los controles interactivos de la página?
De lo contrario, es posible que debas usar tabindex para mejorar la capacidad de enfoque de esos controles.
La regla general es que cualquier control con el que un usuario pueda interactuar o proporcionar entradas debe poder enfocarse y mostrar un indicador de enfoque.
Si un usuario de teclado no puede ver lo que está enfocado, no tiene forma de interactuar con la página.
Cómo corregirlo
Si el orden de enfoque parece incorrecto, debes reorganizar los elementos del DOM para que el orden de tabulación sea más natural.
Si no puedes acceder a todos los controles interactivos de la página, la primera solución es reemplazar los controles personalizados por alternativas HTML estandarizadas.
Por ejemplo,
reemplaza un <div> que actúa como un botón por <button>.
El uso de elementos HTML integrados puede mejorar en gran medida la accesibilidad de tu sitio y reducir significativamente tu carga de trabajo.
Si compilas componentes interactivos personalizados sin un equivalente HTML estandarizado, usa el atributo tabindex para asegurarte de que sean accesibles con el teclado.
Por ejemplo:
<div tabindex="0">Focus me with the TAB key</div>
Obtén más información en Cómo controlar el enfoque con tabindex.
Recursos
Código fuente de la auditoría La página tiene un orden de tabulación lógico