Los controles personalizados tienen etiquetas asociadas

Los controles interactivos personalizados deben poder enfocarse. Si usas JavaScript para convertir un <div> en un menú desplegable elegante, no se insertará automáticamente en el orden de tabulación. Debes comprobar de forma manual que todos los controles personalizados puedan enfocarse en el teclado. Consulta también los Aspectos básicos de acceso al teclado.

Cómo probarlo manualmente

Si quieres 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 Cómo controlar el enfoque con tabindex.

Cómo corregirlo

Para que un control personalizado sea enfocable, inserta el elemento de control personalizado en el orden natural de pestañas mediante 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 el mouse o deciden no hacerlo, la navegación con teclado es el medio principal para llegar a todo lo que aparece en una pantalla. Las buenas experiencias con teclado dependen de un orden de tabulación lógico y estilos de enfoque fácilmente distinguibles. Si un usuario que usa el teclado no puede ver lo que está enfocado, no tiene manera de interactuar con la página.

Obtén más información en Cómo realizar una revisión de accesibilidad.

Recursos