Verifica manualmente que todos los controles personalizados puedan enfocarse con el teclado y muestren un indicador de enfoque. El orden en el que se enfocan los elementos debe seguir el orden del DOM. Si no sabes qué elementos deben recibir el foco, consulta el módulo de enfoque en el curso Aprende accesibilidad en web.dev.
Cómo realizar pruebas manuales
Para probar que el control personalizado sea enfocable y muestre un indicador de enfoque, comienza por navegar con pestañas en tu sitio.
Usa TAB (o SHIFT +
TAB) para desplazarte entre los controles y las teclas de flecha, ENTER y SPACE para manipular sus valores (consulta también Conceptos básicos del acceso con el teclado):
¿Puedes acceder a todos los controles interactivos de la página? ¿Hay un indicador de enfoque en cada control interactivo?
Cómo corregirlo
Si no puedes desplazarte por todos los elementos de una página con tabulación, es posible que debas usar tabindex para mejorar la capacidad de enfoque de esos controles.
Para que un control personalizado pueda enfocarse, inserta el elemento de control personalizado en el orden de tabulación natural con tabindex="0" (consulta también Controla el enfoque con tabindex).
Por ejemplo:
<div tabindex="0">Focus me with the TAB key</div>
Es posible que también debas agregar los roles ARIA adecuados a los elementos de control personalizados. Consulta Los controles personalizados tienen roles de ARIA.
Si no ves un indicador de enfoque, considera usar :focus para mostrar siempre un indicador de enfoque.
Independientemente de si usas un mouse o un teclado para presionar la tecla Tab, el indicador de enfoque del botón siempre se ve igual (consulta también Enfoque de estilo).
¿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 de teclado no puede ver ni saber qué está enfocado, no tiene forma de interactuar con la página.
Obtén más información en Cómo hacer una revisión de accesibilidad.
Recursos
- Código fuente de la auditoría Los controles interactivos son enfocables.
- Algunos elementos tienen un valor de
[tabindex]superior a0. - Usa código HTML semántico para obtener resultados más fáciles con el teclado.