Dos problemas típicos

Hace unos días estuve en comunicación con una persona responsable del Foro Histórico de las Telecomunicaciones, una iniciativa muy interesante.

Le comenté dos errores típicos que afectan a la accesibilidad de una página web:

Uso de colores con poco contraste

Hay texto con un color gris claro que es difícil de leer para usuarios con problemas de contraste.

En la siguiente imagen se muestra una página tal como la ve una persona sin problemas de visión. El texto principal está en gris, tiene un tamaño pequeño y un grosor fino, eso dificulta la lectura a personas con algunos tipos de problemas de visión. Incluso una persona sin problemas de visión tendrá dificultades para ver la página si usa un teléfono móvil a plena luz del día.

En la siguiente imagen  se muestra una simulación de visión de bajo contraste. El texto principal ahora es más difícil de leer.

Para calcular si dos colores tienen un contraste suficiente se puede usar alguna de las herramientas online que calcula el contraste entre dos colores. Yo suelo utilizar Color Contrast Checker, pero hay otras igual de válidas.

Enlaces no destacados cuando reciben el foco

Algunos enlaces no se destacan cuando reciben el foco con el teclado, eso impide su uso por los usuarios que no utilicen un ratón o dispositivo táctil.

En la siguiente imagen, el enlace "Multimedia" de la barra de navegación principal está destacado, correcto, eso ayuda a los usuarios a no "sentirse perdidos". Pero no se destacan los enlaces cuando reciben el foco por el teclado. En esta captura, yo me he situado en el enlace "Museo", se puede saber porque en la parte inferior de la captura se visualiza la URL del enlace. Sin embargo, el propio enlace no aparece destacado.

La página de la universidad en la que trabajo no es un ejemplo de excelencia, el error de enlaces no destacados existe. Pero en el caso de la barra de navegación principal sí que se destacan los enlaces, aparece una línea debajo del enlace cuando el usuario se desplaza. En este ejemplo, el enlace "La universidad" aparece destacado, ya que es el enlace sobre el que me he situado.