Lección 10El proceso de diseño: ¿cómo encajar la accesibilidad web?

Noción 74

La importancia de la navegación con teclado

Competencias objetivo

Identifica la necesidad de diseñar tu sitio web para aquellos que solo utilizan el teclado y algunas funcionalidades relacionadas

La navegación con el teclado ofrece una mejor experiencia de usuario en un sitio web. Poder realizar todas las acciones de una web utilizando sólo el teclado tiene un impacto significativo en la eficiencia para el usuario. Además, hace que tu sitio web sea accesible desde el punto de vista de las Directrices de Accesibilidad al Contenido en la Web (WCAG). Por otro lado, el uso del ratón puede resultar difícil para los usuarios con discapacidades motrices o visuales o para aquellos con limitaciones de hardware. Además, las interacciones complejas del ratón pueden limitar la accesibilidad de tu página web.

Aquí están algunas acciones en las que el teclado puede sustituir al ratón.

Para empezar, puedes ver en este Canva las teclas utilizadas principalmente para la navegación en un sitio web accesible:

Clics con el teclado

La tecla Enter se considera el equivalente a hacer clic en un botón o enviar un formulario. Una vez que un elemento de la página web está “seleccionada”, Enter activará sus acciones. Las acciones de arrastrar y soltar pueden ser complicadas sin un ratón y deberían tener una alternativa de teclado como, por ejemplo, una a base de valores numéricos o botones de acción.

Enfocar los elementos

El ratón es una gran herramienta para señalar algo en la pantalla. Para ofrecer a los usuarios la misma experiencia, la accesibilidad mediante el teclado debe garantizar también que cualquier elemento de interés sea seleccionado, como botones, enlaces o menús. Algunos anclajes HTML, como los anclajes en el menú de navegación y en las secciones o títulos principales, también pueden ayudar a navegar por las páginas más fácilmente con el teclado.

Desplazamiento con el teclado

Desplazarse por una página con el teclado es una función propia de HTML, por lo que no hay que limitar el desplazamiento de los usuarios sólo con el ratón. ¡Cuidado con atrapar al usuario en un marco sin posibilidad de salir! Una situación como ésta puede ocurrir con los modals, los formularios o los menús.

En un teclado, la tecla Tab es también una buena forma de navegar rápidamente por toda la página web y todos sus elementos.

#Proporcionar a los usuarios información de apoyo

Al navegar y centrarse en un elemento (seleccionar), el usuario debe conocer la ubicación del cursor del ratón. Ayuda a saber cuándo hay que hacer clic en algo o en qué lugar de la página está mirando el cursor. No anules la opción de outline on focus (focalización); de lo contrario, ¡algunos usuarios podrían perder el cursor!

HTML es accesible con el teclado por defecto

Afortunadamente, HTML es totalmente compatible con la navegación con teclado. Hay algunas cosas a las que los desarrolladores deben prestar atención y que deben evitar:

Funciones personalizadas no manejadas por HTML por defecto
EventListener basados en algunos “mouse events” (sirve para registra un evento a un objeto en específico es decir, registrar las acciones/eventos que se producen debido a la interacción del usuario con el ratón).
Anulación de la navegación con el teclado.