Comprueba de forma manual que todos los controles personalizados puedan enfocarse en 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 estás seguro de qué elementos deben enfocarse, consulta Introducción al enfoque.
Cómo probarlo manualmente
Para probar que el control personalizado se pueda enfocar y muestre un indicador de enfoque, comienza por navegar por tu sitio.
Usa TAB (o SHIFT +
TAB) para moverte entre los controles, y usa las teclas de flecha y ENTER y SPACE para manipular sus valores (consulta también Aspectos básicos de acceso al 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 con tabulación por todos los elementos de una página, es posible que debas usar tabindex para mejorar la capacidad de enfoque de esos controles.
Para hacer que un control personalizado sea enfocable, inserta el elemento de control personalizado en el orden natural de pestañas mediante tabindex="0" (consulta también Control de foco con tabindex).
Por ejemplo:
<div tabindex="0">Focus me with the TAB key</div>
Es posible que también debas agregar los roles de ARIA adecuados a los elementos de control personalizado. 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 Tab, el indicador de enfoque del botón siempre se ve igual (consulta también Estilo de foco).
¿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.