El Blog de Accede Me

Estas son algunas pautas para construir un sitio más accesible y que los visitantes con baja visión lo puedan usar.

¿Alguna vez has necesitado usar una lupa para leer algo, o los dedos para ampliar la pantalla de tu móvil?

Desde minúsculas advertencias en los prospectos de medicamentos hasta los ingredientes de un producto de la cesta de la compra, casi todo el mundo hemos tenido problemas para leer algo. Para las personas con baja visión, esta es una lucha diaria cuando navegan por la web.

Millones de personas en todo el mundo tienen baja visión o agudeza visual limitada. Aunque los usuarios con baja visión no son legalmente invidentes, su vista está limitada en la medida en que puede ser difícil usar ordenadores, tabletas o smartphones para navegar por la web.

Esto no debería pasar, sobre todo porque hay formas de eliminar las barreras que experimentan estos usuarios. Empieza a hacer que tu sitio web sea más accesible para los usuarios con baja visión cambiando el tamaño del contenido y asegurándote que haya suficiente contraste entre el contenido y el fondo.

Aunque la baja visión afecta la forma en que los usuarios interactúan con todo el contenido, el texto es un problema particularmente complicado. La mayor parte del texto web es demasiado pequeño para que estos usuarios puedan leerlo.

Afortunadamente, la capacidad de hacer zoom ha esta disponible en la mayoría de los navegadores desde hace varios años. Al acercar el zoom al 150%, 200% o más, estos usuarios pueden ampliar la apariencia del contenido, especialmente el texto, para que sea más legible.

Si bien esa es una característica útil hay que tener en cuenta que hace que el sitio web sea difícil de navegar. Solo aparecen pequeñas porciones del contenido a la vez y desplazarse de lado a lado y de arriba a abajo para reconstruir lo puede ser frustrante. Sin mencionar que el zoom puede hacer que el texto y otros elementos se superpongan, se oscurezcan entre sí y corten información crítica en la pantalla.

Afortunadamente, el diseño adaptativo se ha vuelto común en la web y es imprescindible para que un sitio sea altamente accesible. El diseño adaptativo es una metodología de desarrollo web que implica el uso de fuentes de tipo real y medidas relativas para texto y otros elementos, como porcentajes, ems y rems, en lugar de medidas absolutas como píxeles.

El objetivo del diseño adaptativo es permitir que un sitio web cambie de tamaño para adaptarse a las pantallas de diferentes tamaños. Aunque el ímpetu detrás del diseño adaptativo siempre ha sido hacer que la web sea más accesible cuando se ve en dispositivos móviles con pantallas más pequeñas, es igualmente efectivo para hacer que los sitios sean más accesibles en pantallas de cualquier tamaño cuando se hace zoom en ellas.

Sin embargo, no todos los diseños adaptativos se crean de la misma manera, y vale la pena probarlo para asegurarse de que su sitio, suponiendo que se haya utilizado un diseño adaptativo para crearlo, se amplíe tanto como se reduzca.

Para cumplir con las Pautas de accesibilidad al contenido web (WCAG 2,1), los usuarios deben poder hacer zoom hasta el 200% sin que los elementos se superpongan, se corten y sin necesidad de desplazarse horizontalmente para verlo todo. Si el diseño adaptativo permite a los usuarios hacer zoom a más del 300% o incluso al 400%, eso es aún mejor.

Otro factor difícil para los usuarios con baja visión es el contraste adecuado. Probablemente haya visto un sitio web con un esquema de colores que dificulta la lectura: gris contra gris carbón, por ejemplo, o azul medio contra azul claro.

Los usuarios con problemas de visión requieren una mayor relación de contraste para que el contenido sea visible, y eso es especialmente cierto cuando se trata de texto. Para texto de tamaño normal, la relación de contraste entre el texto y el fondo debe ser de 4,5:1 y, para texto más grande, de 3:1 para alcanzar el nivel AA de la WCAG 2,1. Para cumplir con el nivel AAA que es más estricto, la relación de contraste debe ser de 7:1.

El esquema de color ideal para usuarios con problemas de visión sería negro sobre blanco (o blanco sobre negro), lo que produciría una enorme relación de contraste de 21:1. Sin embargo, es común usar colores para diferenciar tipos específicos de contenido, enlaces en particular.

En ocasiones, las necesidades de los usuarios con diferentes discapacidades chocan. En este caso, las necesidades de los usuarios con baja visión a veces pueden chocar con los requisitos de los usuarios con daltonismo.

Tenga cuidado al elegir un esquema de color para proporcionar no solo un contraste adecuado para los usuarios con baja visión, sino también una diferenciación adecuada de los usuarios con daltonismo. Si el texto del cuerpo y el texto del enlace tienen un color demasiado parecido o se diferencian en ciertas combinaciones de colores problemáticas, los usuarios con daltonismo tendrán dificultades.

Además de verificar las relaciones de contraste con el verificador de contraste de las herramientas de desarrollador del navegador, también debe probar su esquema de color usando uno de los muchos emuladores de daltonismo disponibles, como el filtro de color de Toptal (mejor para sitios web) o el simulador Coblis  (mejor para archivos).

Una solución fácil al problema del esquema de colores es instalar el widget de accesibilidad de AccedeMe. Esta innovadora herramienta brinda a los usuarios el poder de cambiar el contraste y la combinación de colores sin alterar permanentemente su sitio. Por lo tanto, los usuarios con baja visión, o daltónicos, pueden seleccionar la opción que mejor se adapte a cada uno de ellos.