Resumen de Contenidos
¿Qué es la accesibilidad web y el diseño web para usuarios con problemas de visión?
En términos sencillos, la accesibilidad web permite que las personas con discapacidades puedan percibir, comprender, navegar, interactuar en la web. Los diseñadores de páginas web deberían garantizar una accesibilidad para todos los usuarios, diseñando experiencias en la web que puedan ser utilizadas y comprendidas por personas con una amplia variedad de habilidades visuales, auditivas, cognitivas y físicas.
A pesar de que una web es intrínsecamente visual, muchos sitios no son aptos para personas con discapacidades visuales. Por ejemplo, no es raro ver sitios web que usan combinaciones de colores de fondo y primer plano que hacen que las páginas sean prácticamente ilegibles para usuarios daltónicos. A pesar de todo esto, las personas con discapacidades visuales usan la web todos los días para navegar, leer y escribir correos electrónicos, y hacer cualquier otra cosa que se pueda concebir en internet.
Entonces, ¿qué podría pasar cuando un usuario daltónico, no puede leer el texto porque se confunde con el fondo? Simple: se irá de la página. Verás, la inaccesibilidad equivale a exclusión. No es solo que el usuario se pierde la información que estaba buscando, sino que la página web pierde un posible cliente, suscriptor y/o una oportunidad de venta.
Los usuarios con discapacidades visuales no deberían tener que adaptar su comportamiento para lograr eficazmente sus objetivos. Más bien, un buen diseño web debería satisfacer las necesidades de todos los usuarios, incluidas las personas con discapacidades visuales.
«El poder de la web está en su universalidad. El acceso de todos, independientemente de su discapacidad, es un aspecto esencial.» TIM BERNERS-LEE, DIRECTOR DE W3C E INVENTOR DE LA WORLD WIDE WEB.
Problemas comunes al navegar en la web:
Estos son algunos de los problemas más frecuentes que encuentran los usuarios ciegos:
- Áreas no accesibles a través del lector de pantalla
- Contenido de la página no estructurado con encabezados
- Los encabezados no siguen una secuencia lógica
- Imágenes sin texto alternativo
- Campos de entrada sin etiquetas asociadas
- Enlaces sin una descripción accesible
- Botones sin una descripción accesible
- Elementos interactivos no marcados correctamente usando el elemento HTML adecuado
- A menudo descubrimos que los problemas reportados por personas ciegas y con discapacidad visual varían bastante.
El alcance del problema
Según la fundación Retina+, casi un millón de personas en España algún tipo de discapacidad visual, desde leve hasta grave, y aproximadamente 70.000 de los afectados son “legalmente ciegos”. Las discapacidades visuales abarcan una serie de problemas y discapacidades, entre las que destacan el daltonismo, la baja visión y la ceguera.
El daltonismo incluye dificultades para distinguir entre colores, como entre rojo y verde, o entre amarillo y azul, y a veces la incapacidad de percibir cualquier color en absoluto. Las formas más comunes de daltonismo son la deuteranopía, que es una sensibilidad reducida a la luz verde, y la protanopía, que es una sensibilidad reducida a la luz roja.
A nivel mundial, el daltonismo afecta al 8 por ciento de la población masculina y al 0,5 por ciento de la población femenina, así que si eres un diseñador web, piensa en esto: si 100 personas visitan tu sitio, las estadísticas indican que aproximadamente 10 de ellas no pueden ver colores con una eficiencia normal.
Se estima que unos 285 millones de personas tienen discapacidad visual en todo el mundo: 39 millones son ciegos y 246 millones tienen baja visión. Las personas diagnosticadas con baja visión pueden ver colores, pero tienen problemas con la baja agudeza visual (visión que no es nítida), visión en túnel (solo ven el medio del campo visual), pérdida del campo visual central (solo ven los bordes del campo visual) o visión nublada.
Aquellos que tienen una discapacidad visual que va más allá de la baja visión diagnosticada se consideran ciegos.
La ceguera, por definición, es una pérdida sustancial e irremediable de la visión en ambos ojos. Quizás hayas oído el término «Legalmente Ciego». Esto no siempre insinúa una oscuridad total, pero la discapacidad visual es lo suficientemente significativa como para que uno no pueda funcionar sin ayuda personal o tecnológica debido a la extrema pérdida de agudeza visual.
Como diseñadores de UX, entendemos que, aunque la proporción estadística de usuarios que tienen una discapacidad visual es pequeña en comparación con aquellos que no la tienen, aún así debemos tenerlos en cuenta durante la fase de diseño y tenerlos muy presentos para darles una experiencia de usuario óptima.
No sería justo, ni sería correcto, no incorporar diseños que ofrecieran asistencia y facilidad de uso para aquellos que tienen una discapacidad visual. Por lo tanto, proporcionamos los siguientes nueve consejos para mejorar la usabilidad para estas personas basados en las Directrices de Accesibilidad al Contenido en la Web (WCAG).
Aquí tienes un resumen las directrices mencionadas anteriormente en un conjunto de consejos y recomendaciones que se pueden (¡y deberían!) incorporar en su proceso de diseño de una página web. Aunque los siguientes consejos no lo abarcan todo, sí tratan los problemas habituales que las personas con discapacidades visuales enfrentan al usar la web.
9 Consejos sobre cómo hacer una web accesible para ciegos y personas con discapacidad visual
Proporciona suficiente contraste usando colores y texturas
Prueba los colores para asegurarte de que tengan el ratio de contraste adecuado para la legibilidad, usando herramientas como Stark para Sketch. Herramientas como esta prueban combinaciones de color de texto sobre color de fondo, y también tienen en cuenta el tamaño del texto.
Por ejemplo, WCAG 2.0 nivel AA requiere un ratio de contraste de 4.5:1 para texto normal y 3:1 para texto grande (es decir, 14 puntos y en negrita o más grande, o 18 puntos o más grande). Los verificadores de contraste de color suelen comprobar la conformidad con esta norma, por lo que podría ser una buena idea guardar en favoritos los estándares y directrices que WCAG ha establecido.
Además, también puedes usar diferentes tipos de extensiones de Google Chrome que te ayudará a detectar si el contraste es suficiente. La que yo uso es WAVE Evaluation Tool.
Limita y prioriza el color en la interfaz
Cuantos más colores introduzcas en una interfaz de diseño, más difícil será probablemente para un usuario, incluso sin discapacidad visual, identificar rápidamente las acciones primarias y los enlaces. Para una persona con daltonismo, esto solo se vuelve más difícil a medida que se introducen más colores.
Un dato curioso, Photoshop CC ofrece soporte para simular el daltonismo. Según Adobe, «Los usuarios pueden probar imágenes con Diseño Universal de Color (CUD) para asegurarse de que la información gráfica se transmite con precisión a personas con varios tipos de discapacidad visual, incluidas las personas con daltonismo.»
Además, Color Safe es otra herramienta útil que crea paletas de colores para sitios o aplicaciones.
Permite el ajuste manual del tamaño de fuente
Hoy en día, hay varias formas de mejorar la accesibilidad para personas con discapacidad visual, incluyendo software de ampliación y ofreciendo la opción de ajustar el tamaño del texto en la configuración del navegador.
Sin embargo, muchas personas con baja visión, especialmente las personas mayores que pueden experimentar pérdida de visión relacionada con la edad, no usan software de ampliación, y es posible que no estén familiarizados con las opciones de ajuste de tamaño de texto de su navegador.
Al proporcionar a los usuarios una opción clara, ya sea un deslizador, un menú desplegable, un botón, lo que sea, para alterar el tamaño de fuente, las marcas y las empresas (especialmente aquellas con sitios web con mucho contenido) se vuelven más amigables para los usuarios con discapacidad visual.
No te bases solo en el color para comunicar información importante
Cuando se trata de alertas, advertencias y elementos de página accionables como enlaces de texto y botones, aclara que estos son significativos para el usuario incorporando más que un simple cambio de color.
Casi universalmente, las personas entienden que el texto subrayado en azul es un enlace. Por otro lado, todavía hay sitios que subrayan texto en azul pero no enlazan a nada. Los usuarios daltónicos deberían poder confiar en que, cuando se quita el tratamiento de color, el subrayado les indicará que es un enlace.
Además, los usuarios se beneficiarán del uso de iconos y etiquetas relevantes que acompañen las alertas y los elementos de página accionables. Cada elemento de página debería tener más de una señal visual.
Las imágenes, enlaces, botones y otros elementos similares pueden mejorarse con un icono, forma, posición o texto. Al igual que el subrayado de los enlaces, los usuarios reconocerán las señales de acción primaria, como el tamaño, la ubicación, el grosor y los iconos.
Otorga accesibilidad por teclado
Los atajos de teclado pueden facilitar la navegación a los usuarios con discapacidad visual. Un ratón no es útil para navegar porque requiere coordinación mano-ojo. Esto es especialmente cierto para los usuarios que son ciegos y utilizan lectores de pantalla para navegar por la Web.
Para las personas con baja visión, los comandos del teclado hacen posible navegar por un sitio sin tener que enfocarse y seguir un cursor del ratón en la pantalla.
Usa etiquetas explícitas y descriptivas para enlaces y botones
Evita usar etiquetas de enlace vagas como «haz clic aquí». Las personas que usan lectores de pantalla a menudo usan un atajo de teclado para listar todos los enlaces en una página y navegar de manera más eficiente. Dado que esta lista de enlaces no tiene texto circundante, crea un estado sin contexto.
Como tal, es imperativo crear etiquetas de enlace descriptivas y explícitas que tengan sentido fuera de contexto. Esta es una mejor práctica que beneficia a todos los usuarios. Las etiquetas de enlace descriptivas también pueden promover la escaneabilidad para los usuarios videntes, y como bonificación, esto ayuda a mejorar la optimización de motores de búsqueda (SEO) para el sitio.
Una nota al margen para entender la accesibilidad de los lectores de pantalla:
La forma más común para que los usuarios ciegos naveguen por la Web es con un navegador y un lector de pantalla (también conocido como software de texto a voz). Algunos de los lectores de pantalla más utilizados son Microsoft Narrator para usuarios de Windows y VoiceOver para usuarios de Mac.
Entender cómo el software de texto a voz ayuda a los discapacitados visuales a «leer» sitios web es esencial para cualquiera que diseñe páginas accesibles.
Así es como funciona: un lector de pantalla traduce las páginas web a texto plano. Luego escanea toda la página (en su formato de texto plano) y la lee en voz alta línea por línea, un elemento a la vez, avanzando por la página de forma lineal.
Esta progresión lineal a través del contenido de la página crea una serie de desafíos para los usuarios que son ciegos, particularmente relacionados con la facilidad de consumo de contenido, comprensión y escaneo.
Por ejemplo, cuando llegan a una nueva página, los usuarios videntes pueden escanear rápidamente la página y entender, de un vistazo, el propósito y el contenido que hay en ella. Por otro lado, los usuarios ciegos deben desplazarse por la página linealmente, un elemento de página a la vez, y deben escuchar el contenido que buscaban en primer lugar.
Esto puede llevar mucho tiempo y requiere una concentración considerable, o el usuario podría perder el interés incial.
Los siguientes consejos están relacionados con la compatibilidad con lectores de pantalla:
Proporciona texto alternativo o descripciones para contenido no textual
Cuando un lector de pantalla lee una imagen o gráfico, dirá «gráfico» o «imagen» y luego leerá el texto alternativo («alt») de la imagen. Si una imagen no tiene texto alternativo, el lector de pantalla la omitirá, por lo que por esta razón es importante proporcionar texto alternativo para imágenes y gráficos.
Usa encabezados para organizar el contenido de la página
Esta es una práctica que beneficia a todos los usuarios. Existen varias formas en que los lectores de pantalla que admiten escaneabilidad permiten a los usuarios revisar páginas para obtener una impresión general del contenido de una página.
Una forma es, saltar de encabezado a encabezado. Al revisar con un lector de pantalla, los usuarios pueden escuchar una descripción general de la información clave de la página, y luego retroceder para leer las partes que les interesan más.
Desafortunadamente, muchos sitios web carecen de encabezados en las páginas. Sin encabezados, este método de revisión del contenido es prácticamente imposible. Teniendo esto en cuenta, es una regla crucial que los diseñadores organicen el contenido con encabezados que, en la medida de lo posible, representen una descripción precisa del contenido de la página.
Usa títulos descriptivos para cada página
Esta es otra práctica que beneficia a todos los usuarios. Junto con los encabezados que describen el contenido dentro de las páginas web, los sitios siempre deben contener títulos que describan el tema o propósito de la página.
La razón es que los lectores de pantalla anuncian el título de la página (el elemento «título» en el marcado HTML) cuando se carga por primera vez una página web. Los usuarios que tienen discapacidades visuales y necesitan usar un lector de pantalla se benefician de esto, ya que pueden recuperar los valiosos minutos que habrían pasado escaneando una página para determinar qué tipo de contenido posee.
Conclusiones al Diseñar Sitios Web para Ciegos o Personas con Discapacidad Visual
Todavía queda mucho por hacer para que la experiencia de usuario y accesibilidad se correcta para las personas con discapacidades visuales. Las experiencias web alcanzables y prácticas no solo minimizan las barreras de accesibilidad y facilitan el uso de Internet, sino que también pueden empoderar a las personas con discapacidades visuales al ofrecerles libertad e independencia online (especialmente para las personas que son ciegas).
Considera integrar los nueve consejos mencionados en tu flujo de trabajo. Utiliza herramientas gratuitas de evaluación de accesibilidad basadas en la web, como WAVE o EvalAccess 2.0, para evaluar el contenido de tu sitio web y garantizar el cumplimiento de WCAG.
Haz de la accesibilidad una prioridad en la comunidad de diseño, y abrirás un mundo de posibilidades para un público totalmente nuevo de usuarios web, así como un sinfín de oportunidades para la innovación dentro del dominio de UX.
