Los controles interactivos personalizados deben ser enfocables. Por ejemplo, si usas JavaScript para convertir un <div> en un menú desplegable elegante, ese menú no se inserta automáticamente en el orden de tabulación correcto.
Debes verificar manualmente que todos los controles personalizados sean enfocables con el teclado.
Cuando sea posible, usa elementos HTML semánticos que permitan la interacción.
Cómo realizar la prueba
Para probar que el control personalizado se pueda enfocar, presiona la tecla TAB para navegar por el sitio:
¿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.
Consulta también Controla el enfoque con tabindex.
Cómo corregirlo
Para que un control personalizado pueda enfocarse, inserta el elemento de control personalizado en el orden de tabulación natural con tabindex="0".
Por ejemplo:
<div tabindex="0">Focus me with the TAB key</div>
¿Por qué es importante?
Para los usuarios que no pueden usar un mouse o que deciden no usarlo, la navegación con el teclado es el medio principal para acceder a todo lo que se encuentra en una pantalla. Las buenas experiencias del teclado dependen de un orden de tabulación lógico y de estilos de enfoque discernibles. Si un usuario que usa el teclado no puede ver el contenido enfocado, no tiene forma de interactuar con la página.
Si es la primera vez que realizas pruebas de accesibilidad, te recomendamos que aprendas sobre las pruebas de accesibilidad manuales y las pruebas de tecnología de accesibilidad.