Muchos usuarios usan el teclado para navegar por las aplicaciones. de usuarios con deficiencias motrices temporales y permanentes para los 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 usar la tecla Tab en la página. El orden en que se enfocan los elementos debe seguir el orden del DOM. En general, el enfoque debe seguir el orden de lectura, moviéndose de izquierda a derecha, de la parte superior a la parte inferior de la página.
Obtén más información en Aspectos básicos del acceso al 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 que se debe solucionar es reemplazar los controles personalizados con 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 creas componentes interactivos personalizados sin equivalente HTML estandarizado,
Usa el atributo tabindex para asegurarte de que se pueda acceder a ellos 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 página tiene una auditoría de orden de tabulación lógico