Seleccionar página

No asumas que la función de zoom en los navegadores web hace que su sitio sea accesible para los usuarios con baja visión.

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.

Zoom

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.

Diseño responsive

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.

Más contraste

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.

Abordar necesidades conflictivas

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).

Dar a los usuarios el poder de personalizar al máximo su experiencia

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. 

Prepare su negocio online para alcanzar su máximo potencial utilizando la solución de accesibilidad web automatizado número uno para el cumplimiento de la WCAG, AcccedeMe.

expertos accesibilidad en una mesa

AccedeMe.com sabe mucho sobre las oportunidades comerciales únicas que su organización puede disfrutar simplemente haciendo que sus páginas web sean más accesibles para todos sus visitantes.

La mejor manera absoluta de aumentar la cantidad de clientes que tiene es asegurarse de que todos los que acceden a su sitio puedan experimentarlo al máximo, independientemente de sus habilidades.

banner lateral blog

Síguenos en nuestras redes sociales

¿Utilizamos el atributo de «título»?
¿Utilizamos el atributo de «título»?

Respuesta corta: No lo uses, y solo en circustancias especiales. Los atributos de título HTML son percibidos normalmente como un bonus de accesibilidad (y SEO), pero la realidad es todo lo contrario. Para los usuarios de lectores de pantalla, el contenido incluido...

Crear enlaces válidos y accesibles
Crear enlaces válidos y accesibles

Los enlaces o elementos de anclaje son el bloque troncal de construcción de la WWW (World Wide Web). Se usan para crear un enlace a otras páginas web, a enlaces dentro de la misma página, a otros recursos (como un PDF) o a una dirección de correo electrónico. ¿Cómo...

banner lateral sobre la tecnología de inteligencia artificial que mueve el sistema