Herramientas asistivas para personas con baja visión
Publicado el:
Existe un mundo de tecnologías más allá de los lectores de pantalla que ayudan a las personas con discapacidades visuales. En este artículo te cuento algunas de estas que ayudan a las personas con pérdida total o parcial de la visión.
Introducción (Link permanente)
Una de las cosas que más he oido hablar en el círculo de accesibilidad web es que No todas las personas que usan lectores de pantalla son ciegas y no todas las personas ciegas usan lectores de pantalla
. Si bien lo primero lo entendía desde antes porque aprendí que hay gente con dislexia o ciertas discapacidades cognitivas que usan lectores de pantalla, la segunda parte de esta frase me pareció algo extraña, ya que no entendía que otras herramientas podían usar.
Decidí averiguar sobre el tema y encontré bastantes cosas a tener en cuenta, y es bueno que nosotros como desarrolladores tengamos todo esto en mente porque a veces nos limitamos a hacer un sitio accesible para lectores de pantallas y olvidamos que no es lo único a tener en cuenta para diseñar un sitio que tenga las discapacidades visuales en cuenta. En este artículo, mencionaré lo aprendido en esta búsqueda y qué deberíamos considerar.
Este artículo no mencionará los lectores de pantalla, ya que cuando se trata de discapacidades visuales, esta herramienta es la que más se suele tener en consideración.
El término de ceguera (Link permanente)
Lo primero que aprendí del tema es que yo ingenuamente creía que cuando se hablaba de ceguera, esta se refería a la pérdida total de la visión, lo cual no es completamente cierto. De hecho, el término de “ceguera” es algo que puede variar dependiendo del contexto, ya que la legislación de tu país impacta en cómo se define este término.
Obviamente, una persona con ceguera total entra en esta definición, pero dependiendo de como las leyes de tu país definan la ceguera, hay otros grados de discapacidades visuales que entran ahí. Por dar un ejemplo, en la Unión Europea (o al menos basado en mi búsqueda), una persona legalmente ciega es:
Aquel individuo que tenga una agudeza visual menor o igual a 10% y/o un campo visual menor o igual a 10 grados en el mejor de sus ojos.
¿Qué es baja visión y ceguera legal? - tengobajavision.com.
Esto es importante saberlo porque el hecho de que una persona sea ciega, no necesariamente quiere decir que no vea nada en absoluto, y esto abre un nuevo grupo de herramientas asistivas que esta persona puede usar para interactuar con nuestros sitios.
Por dar un ejemplo, cuando averiguaba del tema en un grupo de Discord, una persona me comentó el caso de su primo: es una persona que legalmente es ciega, pero tiene algo de visión residual en uno de sus ojos, por lo que él prefiere no depender de lectores de pantalla y en su lugar usar otras herramientas.
Ya con esto entendido, veamos qué tipo de herramientas asistivas puede recurrir una persona ciega para interactuar con un sitio web.
Magnificadores (Link permanente)
Una herramienta que puede usar una persona con baja visión son los magnificadores de pantalla. Básicamente son lupas virtuales que aumenta el tamaño de lo que se ve en pantalla, enfocándo a una porción de esta. Hay varios magnificadores en el mercado, por dar un ejemplo, Windows viene con su propio magnificador: la herramienta de Lupa, que permite ampliar lo que se ve en pantalla hasta en un 1600%. Viene integrado con un lector también, así que si la persona así lo desea, puede complementar lo que ve con una lectura de (valga la redundancia) el lector de pantalla de Windows.
Otra herramienta que existe en el mercado es Zoomtext (Abre en una nueva pestaña) que además permite hacer algunos cambios como cambiar el tamaño del cursor, cambiar los colores que se ven en pantalla y agregar ciertos filtros que ayuden a ver a personas que tengan dificultades viendo ciertos tonos de colores.
Consideraciones en desarrollo Link permanente
Es importante tener estas herramientas en cuenta por varias razones. Una de estas es porque a veces podemos depender de esconder elementos con valor semántico de forma visual, pero no para lectores de pantallas usando CSS (tal como lo mencioné en mi anterior artículo: la guía de encabezados de HTML), lo cual funciona muy bien para lectores de pantalla, pero en otros escenarios puede causar confusión, y uno de estos es el uso de magnificadores, ya que si la persona usa el lector de pantalla integrados en este, va a leer información que no va a coincidir con lo que la persona puede ver.
Adicionalmente, algunos componentes pueden generar problemas para este tipo de usuarios, principalmente, los que reaccionan al momento de poner el cursor sobre este, como los tooltip o tarjetas que muestran información bajo este caso. Es bastante a tener en cuenta y da espacio para una entrada de blog al respecto, así que si quieren saber más, dejaré este artículo de Axess Labs (Abre en una nueva pestaña) al respecto.
Líneas braille (Link permanente)
Otra herramienta asistiva que usan las personas ciegas es una línea braille. Es una especie de teclado que se conecta a un dispositivo, tiene unas líneas con 8 puntos y cuando lee un caracter va subiendo o bajando dichos puntos, transcribiendo cada caracter a braille. Esto permite a las personas con ceguera o con baja visión poder consumir el contenido en braille. Si quieres ver como funciona una línea braille puedes ver este video del canal Ayuda Para Todos (Abre en una nueva pestaña) .
Esta herramienta tiene ciertas ventajas a comparación de un lector de pantalla, ventajas que la verdad no entendía del todo en un principio, pero gracias a Enara (Abre en una nueva pestaña) y Lucía (Abre en una nueva pestaña) , un par de personas ciegas en Twitter que muy amablemente me contaron su experiencia, pude entender varios contextos en los que una línea braille es preferible:
- Permiten brindar a las personas sordociegas (o que poseen discapacidades visuales y auditivas) una alternativa para que ellos también puedan acceder a contenido web.
- Es particularmente útil en contextos donde usar un lector de pantalla puede ser problemático. Por ejemplo, si estás tomando clases en una universidad. Depender solo de un lector de pantalla sería problemático porque tendría que escuchar tanto al profesor como al lector, pero con una línea braille, esto resulta mucho más fácil.
- Para las personas que están más acostumbradas al braille, este dispositivo ofrece mejor velocidad de lectura.
- Algunos modelos vienen con una función para poder tomar notas sin necesidad de estar conectados a un dispositivo, lo que resulta bastante conveniente.
Al final del día, esto se resume a las preferencias de cada usuario y es importante que nosotros como desarrolladores tengamos esto en mente. algunos combinan lector de pantallas y línea braille, de la misma manera que un magnificador viene con lector de pantallas integrado.
Consideraciones en desarrollo Link permanente
La buena noticia de esto es que el mismo conjunto de prácticas que usamos para hacer un sitio funcional en un lector de pantalla servirán igual para una línea braille. De hecho, lectores de pantalla como JAWS o NVDA también ofrecen soporte para estos.
Esto para desarrolladores es conveniente, porque una línea braille es costosa (en España están rondando los 2.000 euros), así que hacer pruebas de nuestros sitios en estos dispositivos no es una posibilidad para muchos de nosotros, así que puedes tener la seguridad de que si funciona en un lector de pantalla, funcionará en estas líneas.
Sin embargo, si hay unas cuantas propiedades de aria que funcionan sólamente para líneas braille. Propiedades como aria-braillelabel o aria-brailleroledescription permiten agregar una descripción o un rol respectivamente que funciona sólo para lectores de pantalla. El fin de estos es crear una descripción más corta, ya que en una línea braille por lo general traduce de 20 a 30 caracteres a la vez, esto puede ser útil en estos casos. Por dar un ejemplo:
<button aria-braillelabel="***">
<img src="./3-de-5-estrellas.jpg" alt="3 de 5 estrellas" />
</button>
Ya que el * tiene su equivalente en braille, en este caso en particular es más fácil para una línea braille leer “***” que “3 de 5 estrellas”. Sin embargo este tipo de cambios no deberían hacerse al menos que lo acompañes con pruebas y validación con usuarios (lo cual puede ser costoso, porque recuerda, rodan los 2.000 euros en paises como España), de otro modo puedes estar haciendo la experiencia más confusa para usuarios de estos dispositivos.
Herramientas del navegador (Link permanente)
Los magnificadores y las líneas braille no son las únicas herramientas disponibles para gente con discapacidades visuales. A nivel digital, estas personas también tienen acceso a otras herramientas. Estas normalmente se enfocan más en gente que no son ciegos (ni de forma total ni bajo el concepto legal) sino que tienen algunos problemas de visión menos severos.
Tu navegador de elección cuenta con un par de opciones posibles para ayudar a las personas con discapacidad visual: en concreto dos, el zoom y la capacidad de aumentar el tamaño default de la letra. Si vas a tu navegador de preferencia podrás encontrar estas opciones. En el caso de Google Chrome, lo encontrarás en el menú de Configuración y luego en Aspecto. El Zoom de la página lo encontrarás en Zoom de la página y la opción para cambiar el tamaño de la fuente se encuentra al hacer clic en Personalizar fuentes.
Zoom Link permanente
El zoom permite aumentar el tamaño del sitio y a diferencia de usar un magnificador de pantalla este va a causar cambios en el layout. La WCAG (Web Content Accessibility Guidelines) tiene el criterio 1.4.10 llamado Reflow que dicta lo siguiente:
El contenido se puede presentar sin pérdida de información o funcionalidad, y sin requerir scroll en dos dimensiones para:
- Scroll horizontal en contenido a un ancho equivalente a 320 pixeles de CSS
- Scroll vertical en contenido a una altura equivalente a 256 pixeles de CSS
Entendiendo el criterio 1.4.10: Reflow - WCAG.
320px es el equivalente de una pantalla de 1280px cuando está en un zoom al 400%, por lo tanto Es necesario asegurarnos que no se pierda funcionalidad en un sitio con un zoom al 400%.
Esto supone ciertos desafíos porque puede pasar que dependiendo de tu layout, a este zoom pasen cosas como barras en la parte superior que ocupen la mitad (¡o más!) de la pantalla o espaciados, márgenes o paddings que sea demasiado grandes, por lo que habrá poco espacio para el texto.
Por desgracia, CSS no cuenta con una media query para detectar el zoom, y en temas de layout, manejar cambios con JavaScript puede ser impreciso ¿Cómo lidiamos con estos problemas? Además de evadir fijar una barra en la parte superior, Stephanie Eeckles propone unas soluciones interesantes en su charla Scaling CSS layout beyond pixels (Abre en una nueva pestaña) (marcador en la sección donde habla del tema) al utilizar las funciones
max,minyclamp. Esto además de ayudarnos con el zoom, nos ayuda a tener layouts que sean más responsivos a los distintos tipos de pantalla, así que en serio vale la pena considerarlo.Tamaño de letra Link permanente
Para respetar las preferencias de tamaño de texto del usuario, la solución es bastante simple: ¡usa
remyemen tus textos!1remes equivalente a la cantidad en pixeles que el usuario haya definido en el navegador, y por defecto, este valor es 16px, pero si el usuario cambia este valor, nuestro diseño se adaptará sin problema. Esto también lo cubre el criterio 1.4.4 de la WCAG:Con excepción de los subtítulos y el texto de las imágenes, se puede ajustar el tamaño del texto sin necesidad de tecnologías asistiva en un 200% sin pérdida de contenido o funcionalidad.
Entendiendo el criterio 1.4.4: Ajuste de tamaño de texto - WCAG.
¿Esto quiere decir que debamos usar
emyrempara todo? No realmente, hay casos donde usarpxsigue siendo importante. Josh Comeau cubre esto en su artículo The surprising truth about pixels and accessibility (Abre en una nueva pestaña) (nota rápida: el título parece clickbait, me encanta) y muestra como si bien en términos de accesibilidad es importante usaremyremcomo medidas de texto, para espacios, márgenes y paddings es conveniente usar píxeles en ciertos escenarios. Puedes combinar el uso de píxeles con lo visto en el video de Stephanie y cubrirás una buena parte de los problemas que pueden surgir si el usuario escala el tamaño de letra o el zoom.
Para terminar (Link permanente)
Las discapacidades visuales no son algo binario, no se trata solo de si ves o no ves si no también en que grado, y dependiendo de qué tipo de discapacidad visual tenga una persona, puede recurrir a una herramienta u otra, y esto trae sus propias implicaciones para nosotros los desarrolladores.
Este artículo (por pura coincidencia) ha salido en el mes del orgullo por la discapacidad, y quiero aprovechar para dar un consejo importante que nos ayudará a crear sitios más accesibles: entiende como una persona con discapacidad usa un sitio. Si sabes como una persona usa un sitio, sabes que necesidades tendrá y sabrás que hacer y también que no hacer para lograr una gran experiencia de usuario.
No es mucho, pero hago mi parte en este humilde blog tratando de explicar como estas tecnologías funcionan, que consideraciones tener y patrones que funcionen bien para cubrir distintos tipos de discapacidad, espero que este grano de arena sea de ayuda para crear una web más accesible. Sin más que decir, recuerden que pueden seguirme en mi cuenta de Bluesky (Abre en una nueva pestaña) . ¡Hasta la próxima vez!
