Los controles interactivos se pueden enfocar en el teclado

Publicado: 2 de mayo de 2019

Comprueba manualmente que todos los controles personalizados se puedan enfocar 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 con certeza qué elementos deben recibir el enfoque, consulta el módulo de enfoque en el curso Learn Accessibility en web.dev.

Cómo realizar pruebas manuales

Para probar que el control personalizado se puede enfocar y muestra un indicador de enfoque, comienza a navegar por tu sitio con la tecla Tab. Usa TAB (o SHIFT + TAB) para moverte entre los controles, y usa 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 navegar con la tecla Tab por todos los elementos de una página, es posible que debas usar tabindex para mejorar la capacidad de enfoque de esos controles.

Para que un control personalizado pueda recibir el enfoque, inserta el elemento de control personalizado en el orden de tabulación natural con tabindex="0" (consulta también Cómo controlar el enfoque con tabindex). Por ejemplo:

<div tabindex="0">Focus me with the TAB key</div>

También es posible que debas agregar los roles de 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 acceder a él con la tecla Tab, el indicador de enfoque del botón siempre se ve igual (consulta también Cómo aplicar estilo al enfoque).

¿Por qué es importante?

Para los usuarios que no pueden o eligen no usar un mouse, la navegación con el teclado es el medio principal para acceder a todo lo que aparece en la pantalla. Las buenas experiencias con el teclado dependen de un orden de tabulación lógico y de estilos de enfoque perceptibles. 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 sobre la accesibilidad en Learn Accessibility.

Recursos