A Zoey le encanta navegar por Internet. Disfruta perdiéndose en la red interconectada llena de información, desentrañando piezas de conocimiento dignas de ser marcadas. Pero no disfrutan hojeando grandes cuerpos de texto. Prefieren las imágenes. Muchas. Revisan las fotos de su enamorado en Facebook antes de plantearse leer su biografía. Su anhelo de memes y visualizaciones no tiene parangón con nadie en este planeta y sus historias de Instagram lo reflejan. Simplemente, están muy conectados a su naturaleza de aprendices visuales. Y eso no tiene nada de malo.
Pero en el mundo no solo está Zoey. Está Trung-Anh, está Sewon, está Nayon, está Venkatesh, está Zeqiu, está Dinko, está Sade, está Ivan y está Mohammed. Según la OMS, al menos un 29% (2.200 millones) de la población mundial (7.700 millones) tiene algún tipo de discapacidad visual, lo que supone al menos 3 personas en la lista mencionada. Hmm, entonces, umm… ahora que sabemos que el 29% de la población podría no ser capaz de ver el contenido visual, ¿qué hacemos? ¿Seguimos manteniendo la interpretación literal de la cita de Fred Barnard «Una imagen vale más que mil palabras»? Me atrevo a decir que no. No siempre.
Una pregunta a menudo curiosa es: ¿cómo utilizan un ordenador las personas con problemas de visión? En primer lugar, creo que es importante entender que tener una discapacidad visual no es sinónimo de ser ciego. Por lo tanto, si ves a alguien usando un bastón blanco, sería un error asumir que es completamente ciego. Cuando se trata de utilizar un ordenador, dependiendo de su nivel de visión, pueden utilizar lectores de pantalla para leer el contenido de la misma. Algunos de los lectores de pantalla más populares son JAWS, NVDA (gratuito y de código abierto) y VoiceOver (integrado en los dispositivos de Apple).
El estado del mundo
¡Genial! Así que tenemos una forma de que los usuarios de lectores de pantalla interactúen con sus ordenadores o dispositivos móviles. Pero, ¿cómo puede un lector de pantalla leer las fotos de sus enamorados? ¿O los memes? ¿O los gráficos/visualizaciones? Una posible respuesta aquí es que deberíamos hacer avances médicos para curar su vista o cualquier cosa en la línea de que tengan un asistente personal/amigo/familiar que pueda explicarles lo que hay en la pantalla. Otra posible respuesta consiste en construir un mundo en el que sea posible que lo hagan ellos mismos. Si tu respuesta se acerca más a la primera, está claro que necesitas formarte y familiarizarte con los conceptos del modelo social de la discapacidad.
Imágenes
Centrémonos en las imágenes. Para que el lector de pantalla pueda leer en voz alta una imagen, necesita saber de qué trata la imagen y luego presentarla al usuario de forma significativa. Por ejemplo, consideremos una imagen de una familia jugando con sus Huskies gemelos (¡Vamos Huskies!). Como usuario que no lee en pantalla, es fácil entender lo que sucede en la imagen, no sólo lo que ocurre en el primer plano, sino también en el fondo. Por ejemplo, Jialin, uno de los miembros de la familia, lleva una camiseta que dice «100% humano». ¿Puede el lector de pantalla extraer íntegramente la escena? Para ello, los lectores de pantalla confían en que los desarrolladores o autores de contenidos proporcionen un texto alternativo para las imágenes mediante el atributo «alt», que se introdujo al público en 1995 como parte de HTML 2.0 (si no está familiarizado con lo que es un atributo «alt» o su significado, este artículo ofrece una gran visión general del atributo «alt»). El elemento HTML img tiene entonces el siguiente aspecto:
<img src="image1.jpg" alt="This is an image of two Huskies" />Por lo tanto, el lector de pantalla leerá ahora «Imagen, Esta es una imagen de dos Huskies».
Dejar el atributo alt vacío o suministrar un texto sin sentido como «Imagen 1», como puedes imaginar, no es muy útil. Incluso con el texto alternativo de «Esta es una imagen de dos Huskies», la información que se transmite no se acerca a lo que alguien que no utilice un lector de pantalla podría extraer, como el texto de la camiseta de Jialin. Además, el lector de pantalla ya anuncia el contenido como «imagen» o «gráfico», lo que hace que «Esto es una imagen» sea un texto redundante. Todo esto es con el supuesto de que la imagen es publicada por un usuario que tiene acceso al código para introducir el texto alternativo.
Pero qué pasa con lugares como las plataformas de medios sociales donde las imágenes son subidas por usuarios que no tienen acceso al código en absoluto. Facebook, en 2016, más de una década después de su lanzamiento, comenzó a emplear la inteligencia artificial para añadir texto alternativo generado automáticamente a las imágenes, y permitió a los usuarios editar este texto, si era necesario. Instagram le siguió e implementó esta función el año pasado, 8 años después de su lanzamiento. Sin embargo, las preguntas siguen siendo las mismas: ¿Cuánta información debe proporcionar un texto alternativo? ¿Es suficiente una descripción básica de alto nivel? Al decidir qué presentar a los usuarios de lectores de pantalla, ¿estamos asumiendo y generalizando lo que los usuarios de lectores de pantalla buscan en la imagen? Si una imagen vale más que mil palabras, entonces, metafóricamente, ¿no debería un texto alternativo ser mil palabras?
GIFs e imágenes animadas
Leo tiene un fuerte juego de memes y es un experto en encontrar un GIF de gatos para cualquier ocasión. Dado que un GIF se crea combinando varias imágenes diferentes de forma que el resultado final da la impresión de un vídeo muy corto, ¿nos encontramos con los mismos problemas que con las imágenes? Peor aún. Como desarrollador, ciertamente puedes (y debes) añadir un texto alternativo de forma similar a como lo hacemos con las imágenes (el GIF es un archivo de imagen, después de todo). Pero en las plataformas de medios sociales, dependiendo de cómo se procese un GIF por la plataforma, se renderiza usando un elemento img sin un atributo alt, o usando un elemento video. Un elemento video no admite en absoluto el atributo alt.
Así que todos esos widgets GIF que hemos estado usando para publicar memes animados en Facebook e Instagram, los que nos hacen ser cool y todo, son inaccesibles para los usuarios de lectores de pantalla. Aquí nuestro objetivo no es que Leo deje de publicar GIFs (porque, miau) sino que ese contenido lo disfrute todo el mundo y no solo un subconjunto de la población.
Gráficos y visualizaciones
Todo eso y aún no hemos llegado a lo «difícil». Presentamos los gráficos y las visualizaciones interactivas. Yisu y Xuhai son unos auténticos frikis de las visualizaciones y, al igual que cualquier investigador, creen que los gráficos y las visualizaciones son extremadamente valiosos; rara vez hay un artículo académico sin al menos un gráfico o una visualización. Un gráfico transmite conocimientos muy visuales y suele incrustarse en una página web utilizando una de las tres técnicas principales:
- como imagen para el contenido estático.
- como elemento HTML
canvaso gráficos SVG (actualización de una imagen en varios aspectos) para el contenido estático. - y/o como una visualización interactiva utilizando bibliotecas de JavaScript (que suelen emplear HTML
canvaso SVG como mecanismo subyacente) para servir contenido dinámico y permitir que los usuarios interactúen con el gráfico.
Cuando se utiliza como imagen, se aplican las mismas consideraciones que hemos comentado anteriormente con la complejidad añadida de presentar información científica. ¿Qué debe decir el texto alternativo? ¿Debe ofrecer una visión general del gráfico? ¿Debe incluir estadísticas como la media, el promedio, la mediana, la moda, etc.? Y si es así, ¿cuáles? ¿Cuánta información es poca y cuánta es demasiada? Son preguntas difíciles.
El propio canvas de HTML se expone como un mapa de bits, y sin la implementación de un contenido fallback adecuado plantea varios problemas de accesibilidad. Sin embargo, hay varias técnicas para hacerlos accesibles y están a sólo una búsqueda en Google. Pero, por supuesto, los desarrolladores son los responsables de conocer esas técnicas e implementarlas en su trabajo, algo que he visto mejorar con el tiempo pero en lo que no contendría mi aliento. Por el contrario, se fomenta el uso de SVG para los gráficos accesibles, ya que, según las especificaciones del W3C, los elementos hijos están a disposición de la API de accesibilidad. Sin embargo, todavía se está trabajando en la compatibilidad con los navegadores y un gráfico SVG totalmente accesible requiere esfuerzo y, al menos, algunos conocimientos fundamentales de SVG, lo que, una vez más, es una responsabilidad que recae en los hombros de los desarrolladores.
Para abordar algunas de estas preocupaciones, creé evoGraphs – un plugin de jQuery para crear gráficos accesibles, que ganó el Premio del Delegado para el Desafío de Accesibilidad en la Conferencia W4A en 2015. Hay que reconocer que no aborda todas las cuestiones destacadas sobre la complejidad de la presentación de la información científica. Por lo tanto, los gráficos accesibles son un área activa de exploración para mí y otros investigadores.
Como una visualización interactiva (como ChartJS, Google Charts, y D3), la representación de la información actualizada dinámicamente es difícil. La mayoría de los usuarios de lectores de pantalla no utilizan un dispositivo señalador (como el ratón, el trackpad, etc.) y la mayoría de las interacciones se limitan exclusivamente a, o son más prácticamente utilizables, cuando se pasa por encima de ciertos elementos. Sin estas interacciones, el propósito de las visualizaciones interactivas para un usuario de lector de pantalla se vuelve nebuloso y podría decirse que, sin la consideración adecuada, la comprensión del contenido puede volverse más desconcertante.
Además, muchas bibliotecas de gráficos modernas permiten la modificación dinámica del contenido. La transmisión de la información a los lectores de pantalla, cuando el contenido se modifica, puede ser manejado por el uso adecuado de los atributos ARIA, que se convirtió en una recomendación del W3C en 2014 y es honestamente una bendición. Pero, al igual que con los SVG, el soporte estable de los navegadores para todas las características de ARIA es todavía un trabajo en progreso, especialmente cuando se utiliza dentro de los SVG. Todavía se necesita una formación adecuada de los desarrolladores para utilizar plenamente lo que ARIA tiene que ofrecer.
El camino a seguir
Desde que Tim Berners-Lee creó la World Wide Web, hasta hoy, la tecnología ha aumentado drásticamente. Por desgracia, no se puede decir lo mismo de la accesibilidad de dichas tecnologías. Para cuando una tecnología concreta se hace accesible a las personas con discapacidad, el mundo ya ha pasado a tecnologías más avanzadas. Así que el juego de ponerse al día nunca termina. Y no lo hará, a menos que la accesibilidad se convierta en la consideración fundamental en el desarrollo de nuevas tecnologías.
Pero no toda la esperanza está perdida. Hemos hecho y seguimos haciendo grandes progresos en el ámbito de la accesibilidad web, tanto en la investigación académica como en los productos industriales. Se está enseñando a los estudiantes y a los nuevos desarrolladores los conceptos de accesibilidad y las técnicas para hacer la web más accesible. De cara al futuro, preveo dar un paso atrás y pensar en adaptar el software a las necesidades del usuario, en lugar de esperar que los usuarios se adapten al software. Por ejemplo, ¿seguimos asumiendo la información que un usuario de lector de pantalla querría extraer de una imagen o construimos herramientas que aprendan más sobre el usuario y presenten la información que éste prefiere aprehender? Para mí, el futuro nos aleja de la generalización y nos acerca a la personalización: una World Wide Web realmente centrada en el usuario.
- «Vision Impairment and Blindness». Organización Mundial de la Salud, Organización Mundial de la Salud, https://www.who.int/news-room/fact-sheets/detail/blindness-and-visual-impairment. Consultado el 20 de octubre de 2019.
- «El valor de una imagen: D. H. Hepting, Ph.D.» A Picture’s Worth | D. H. Hepting, Ph.D., http://www2.cs.uregina.ca/~hepting/projects/pictures-worth.
- Materiales HTML 2.0, https://www.w3.org/MarkUp/html-spec.
- Sharif, Ather, y Babak Forouraghi. «evoGraphs-A jQuery plugin para crear gráficos accesibles en la web». 2018 15th IEEE Annual Consumer Communications & Networking Conference (CCNC). IEEE, 2018.
- «Visión general de WAI-ARIA». Iniciativa de Accesibilidad Web (WAI), https://www.w3.org/WAI/standards-guidelines/aria.