Accesibilidad en el mundo digital, más que un concepto un deber
Al desarrollar nuestras soluciones web y móviles siempre pensamos en generar una experiencia agradable a nuestros clientes. Deseamos que visualmente sea atractiva, confiable y que motive a todos a seguir usando nuestros contenidos.
Sin embargo, es vital que pensemos desde el principio en aquellos que acceden a nuestras experiencias digitales y tienen circunstancias diferenciadas (visión reducida, movilidad restringida o limitada, entre otros). La accesibilidad digital debería ser un elemento de evaluación primordial antes de salir al mercado.
Con este artículo daremos comienzo a una serie dedicada a explicar como podemos hacer nuestras aplicaciones pensando en todos nuestros posibles usuarios. Partiremos desde la definición del diseño de la aplicación, veremos como emplearlo en nuestras soluciones Flutter, luego haremos un repaso en el mundo web nativo (HTML, CSS, JS) y lo aplicaremos en Angular.
Definamos la accesibilidad digital
Según la RAE define la palabra accesibilidad de la siguiente forma : “Condición que deben cumplir los entornos, productos y servicios para que sean comprensibles, utilizables y practicables por todos los ciudadanos, incluidas las personas con discapacidad”(link).
Esto quiere decir que para que nuestras soluciones digitales sean accesibles debemos permitir que todas las personas puedan acceder a la experiencia sin importar sus circunstancias.
Ahora bien la accesibilidad no implica tener diferentes soluciones para cada usuario sino unificar los esfuerzos. Un claro ejemplo de esto es el tema oscuro de las aplicaciones. ¿Sabías que originalmente se creó para aquellas personas que tienen problemas de visión, para mejorar el contraste de los elementos? Y siendo muy sinceros muchos usuarios sin problemas visuales preferimos esta configuración.
Por lo tanto, los elementos que explicaré a continuación no solo son para ayudar a personas con alguna circunstancia en particular, sino que mejora la experiencia de todos.
Diseñando experiencias accesibles
La realidad es que la accesibilidad parte del diseño de la experiencia.
Existe unos guidelines (guías) muy bien establecidas por la WAI (Web Accessibility Initiative) te animo a mirarlas en el siguiente link, también puedes observar la WCAG(Web Content Accessibility Guidelines) en este link.
Repasemos algunos de ellos …
Estableciendo el contraste adecuado de los colores
Aunque esto suene simple, es de vital importancia cumplir este criterio en todas nuestras experiencias. Alguien con visión reducida podría no beneficiarse de la solución si no cumplimos al menos con una calificación AA (radio de contraste mínimo de 3) y en lo posible AAA (radio de contraste mínimo 4.5) puedes ver más detalles en este link .
Hagamos un ejercicio, supongamos que para una experiencia se de define el color de fondo será completamente blanco y que el texto será color #dedddd, entonces obtendríamos algo como lo siguiente:
Utilizando la página https://contrast-ratio.com/ podemos averiguar si este es un buen nivel de contraste
Aunque aparentemente se vea bien, no resulta ser un buen nivel de contraste. Si cambiamos el color del texto por un #909090 obtenemos lo siguiente:
Donde en este caso obtendríamos una puntación AA si la fuente es de un tamaño superior a 18pt o entre 14–18pt pero en negrilla.
¡Todavía podemos mejorar!, cambiemos el color del texto por un #3f3f3f
En este caso lograríamos en efecto una calificación AAA. Por lo tanto, en cualquier elemento que necesitemos un fondo y contenido tenemos que asegurarnos de que el contraste sea el adecuado, esto mejorará la experiencia de todos nuestros usuarios y no resulta algo difícil de implementar.
No expresar información únicamente con colores
Así es, es una mala práctica utilizar el color como único medio para indicar información en la aplicación.
Pongamos el siguiente ejemplo:
Supongamos que la siguiente es una experiencia de movimientos de dinero a favor o encontra :
Para aquellos que tienen una visión con la cual pueden ver todos los tonos de colores con claridad, será entendible cuales saldos son a favor y cuales encontra. Pero ¿Qué pasaría si alguien sufriera de acromatopsia (incapacidad parcial o total de percibir colores)? vería algo como lo siguiente :
¿Seguiría siendo entendible la experiencia? ¡Por supuesto que no!, sin embargo agregando un signo ‘+’ y un ‘-’ podríamos mejorar :
Como vemos en la imagen ambas experiencias son entendibles. Para este punto recomiendo alguna extensión tipo NoCoffee la cual nos permite simular problemas asociados a la visión (link). Si hacemos ensayos podremos ver como se verían nuestras experiencias por diferentes usuarios y analizar que mejoras podemos desarrollar.
Subtitula los vídeos de tus experiencias digitales
Este punto es extremadamente importante. Existen muchos usuarios con problemas auditivos y muchos de ellos han tenido la oportunidad de aprender a leer. Es cierto que existen herramientas que hoy en día subtitulan automáticamente pero no todos somo locutores, por lo que en ocasiones al subtitular automáticamente no se expresen con claridad todas las ideas. Inclusive si cuentas con suficiente presupuesto también sería muy bueno tener un traductor al lenguaje de señas de tu país.
Este punto también beneficia a aquellas personas que su audición está aparentemente bien, resulta que en ocasiones el audio no es del todo claro y cado uno escuchará algo diferente. ¿No me crees?
En este video si lees el primer subtitulo mientras lo escuchas, en tu mente sonará lo que leíste pero si vuelves y le das play leyendo la segunda frase oirás algo completamente diferente😨.
Por eso es una excelente práctica es subtitular tus vídeos y de esa forma te asegurarás transmitir la idea correcta.
Diseña elementos de acción con un suficiente tamaño
Todos nos acordamos de ese radio-button imposible de darle clic 😖. En ocasiones por acomodar una experiencia a un tamaño nos podemos ver tentados a disminuir nuestros elementos accionables, pero esto no resulta ser una buena práctica. Por ejemplo usuarios con temblor distal de manos, personas con mano grande, o circunstancias relacionadas les será una tarea titánica acertar en el item deseado. De los siguientes elementos ¿Cuál es más fácil de presionar?
Se recomienda que el tamaño mínimo sea de 24 px para elementos que requieran de acción del usuario.
Entre más intuitiva la aplicación ¡Mejor!
Creo que alguna vez has escuchado decir : “¡Que inteligente es este niño con tan solo cuatro años y ya busca contenido en YouTube, manda mensajes por WhatsApp y hasta llama a la abuelita!”, Pero en esta ocasión quiero que meditemos en algo … el niño es muy inteligente o ¿Será que la aplicación fue diseñada para ser tan intuitiva que hasta un niño de cuatro años pueda utilizarla?
Así es, debemos hacer aplicaciones que sean muy intuitivas, no nos debe dar miedo utilizar símbolos que hemos visto muchas veces en otras partes como estos :
Ya que tienen un significado claro que se a logrado transmitir a lo largo de las experiencias. Tampoco nos debe dar pena que nuestra aplicación sea muy “obvia” , antes bien es algo bueno de lo que podemos estar orgullosos.
Conclusión
Si seguimos hablando de accesibilidad digital podríamos hacer un libro completo, pero quería dejar una semilla en ti. La idea es que después de leer esto diseñes experiencias digitales pensando en todo tipo de usuarios, claro está también hay que codificar de forma accesible. Por eso veremos en los siguientes artículos como implementar en Flutter temas de accesibilidad, también haremos uno específico para el mundo web nativo y otro para web con Angular.
Si te gusto déjanos +50 aplausos 👏, también cuéntanos en la caja de comentarios si implementas accesibilidad digital en tus aplicaciones y que otros puntos utilizas para mejorar la experiencia de todos tus usuarios.
