Muchos usuarios diferentes dependen del teclado para navegar por las aplicaciones, desde usuarios con discapacidades motrices 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 proporcionar una experiencia de navegación con el teclado fluida.
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. 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, desde la parte superior a la parte inferior de la página.
Obtén más información en Aspectos básicos de 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 puede interactuar o proporcionar entrada debe poder enfocarse y mostrar un indicador de enfoque.
Si un usuario que usa el teclado no puede ver lo que está enfocado, no tiene manera de interactuar con la página.
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 no puedes acceder a todos los controles interactivos de la página, la primera solución que debes solucionar es reemplazar los controles personalizados por alternativas de HTML estandarizado.
Por ejemplo, reemplaza un <div> que funciona como 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 de 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 auditoría La página tiene un orden de tabulación lógico