Accesibilidad y diseño UX

Cómo crear experiencias para todas las personas

Empecemos hablando de usabilidad

Podríamos decir que una interfaz es (o, lógicamente, debería ser) primero usable y luego, accesible; que quiere decir que es usable para todas las personas usuarias independientemente de sus niveles de discapacidad física o tecnológica.

Según Jakob Nielsen, el gurú de la usabilidad y autor de libros como “Usability Engineering” y “Mobile Usability”, la usabilidad es un atributo de calidad que evalúa la facilidad de uso de las interfaces de usuario. Según Nielsen, la palabra “usabilidad” también se refiere a métodos para mejorar la facilidad de uso durante el proceso de diseño. En otras palabras, que algo sea “usable” significa que funciona bien, que una persona con pocas habilidades y experiencias puede usarlo para el propósito previsto sin frustraciones ni obstáculos.

De ahí que Nielsen nos propone 5 componentes de calidad para analizar la usabilidad de un producto. Estos son:

• Capacidad de aprendizaje: Característica determinada por la complejidad de la curva de aprendizaje que los usuarios deben atravesar para realizar tareas básicas la primera vez que utilizan el producto.
• Eficiencia: Determinada por la rapidez con la que los usuarios pueden realizar las tareas una vez que han aprendido el diseño.
• Memorabilidad: Determinada por el nivel de facilidad con que los usuarios pueden volver a utilizar el producto después de un período sin usarlo.
• Errores: Determinada por el volumen y la gravedad de los errores que cometen los usuarios al utilizar el producto y con qué facilidad pueden recuperarse de ellos.
• Satisfacción: Determinada por qué tan agradable es usar el diseño de un producto para los usuarios y qué tan satisfechos quedaron con la experiencia de uso.

Usabilidad y UX

Si la usabilidad es la eficacia, eficiencia y satisfacción con la que los usuarios alcanzan sus objetivos cuando interactúan con una interfaz digital, entonces ¿usabilidad y experiencia de usuario son lo mismo? No.

La usabilidad es un estándar que un buen diseño tiene que cumplir. Es un concepto que tiene lugar en la interacción humano-máquina y no trasciende ese espacio. Sin embargo, el diseño UX va mucho más allá, engloba muchos más conceptos. Por ejemplo, supongamos que estamos diseñando un nuevo flujo de pantallas: para hacerlo, tenemos en cuenta varias cosas: el research previo, el contexto de ese flujo con respecto al resto del diseño, el contexto del usuario al interactuar con él, cuidamos la voz y el tono de la marca para escribir los contenidos, etc. Luego, haremos pruebas de usabilidad con personas reales para entender cómo interactúan con ese flujo e iteraremos hasta asegurarnos de que funcione; es decir, de que sea usable y coincida con el modelo mental del usuario.

Usabilidad y accesibilidad

Puede que en algún punto estos conceptos comiencen a desdibujarse, pero accesibilidad y usabilidad no son sinónimos, aunque ambas sean características de un buen diseño UX. Entonces, ¿de qué hablamos cuando hablamos de accesibilidad? La accesibilidad web es la práctica continua de asegurarnos que todo lo que creamos para la web se puede usar, interpretar y operar con una variedad de personas en una variedad de situaciones. A pesar de que ambos conceptos converjan en la búsqueda de la facilidad de acceso por parte de los usuarios, la accesibilidad va más un poco más allá. De esta manera, una interfaz es accesible cuando está diseñada y desarrollada para que las personas con discapacidad visual, auditiva y motora puedan usarlas tan eficientemente como las personas sin discapacidades.

Me parece importante detenernos en la importancia que tiene el equipo de desarrollo en lo que respecta a accesibilidad. De nada sirve un diseño accesible si los desarrolladores no tienen los conocimientos y las herramientas para ejecutarlo. Por este motivo, es vital que todos los miembros que conforman un equipo digital estén capacitados en temáticas de accesibilidad, no solo los programadores, para que desde el área en la que trabajen puedan lograr llevar adelante las acciones propuestas.

Estándares de WCAG

La Iniciativa para la Accesibilidad Web del W3C (World Wide Web Consortium) establece tres niveles de conformidad o cumplimiento de un sitio Web: nivel A (básico), nivel AA (óptimo) y nivel AAA (ideal). Al mismo tiempo, establece 3 principios de accesibilidad que las interfaces deben respetar: deben ser perceptibles, operables y comprensibles

WCAG son las siglas en inglés de Web Content Accessibility Guidelines o, en español, Pautas de Accesibilidad para el Contenido Web. Estas pautas se desarrollaron a través del proceso del W3C en cooperación con personas y organizaciones de todo el mundo, con el fin de ofrecer un estándar único y compartido que satisfaga las necesidades de las personas, organizaciones y gobiernos a nivel internacional. De manera muy resumida, dichas pautas son:

• Proporciona alternativas textuales para contenido no textual.
• Todo el contenido que no es texto que se presenta al usuario tiene una alternativa de texto que sirve para el propósito equivalente, excepto en las situaciones que se enumeran a continuación.
• Proporciona subtítulos y otras alternativas para multimedia.
• Crea contenido que se pueda presentar de diferentes formas, incluyendo a las tecnologías de apoyo, sin perder información.
• Facilita que los usuarios puedan ver y oír el contenido.
• Proporciona acceso a todas las funcionalidades mediante el teclado.
• Concede a los usuarios tiempo suficiente para leer y usar el contenido.
• No uses contenido que pudiera causar convulsiones o reacciones físicas.
• Ayuda a los usuarios a navegar y encontrar el contenido.
• Facilita métodos de entrada diferentes al teclado.
• Proporciona texto legible y comprensible.
• Proporciona contenido que sea predecible en apariencia y operación.
• Ayuda a los usuarios a evitar y corregir errores.

Accesibilidad y color

En el ámbito de la percepción, el contraste es la propiedad que nos permite distinguir unos objetos de otros, o partes de una misma escena como diferentes. Por otro lado, en el ámbito del diseño web, el contraste se utiliza para ofrecer una buena legibilidad entre el texto y el fondo, pero también para diferenciar visualmente diferentes regiones de una página.

Contraste en la UI

El contraste del color entre el fondo y el contenido del primer plano (que suele ser el texto) debe ser lo suficientemente alto como para garantizar la legibilidad. Al diseñar interfaces legibles para diferentes capacidades de visión, las directrices de la WCAG recomiendan las siguientes relaciones de contraste:

• Cuerpo de texto: 4.5:1 para el nivel AA y 7:1 para el nivel AAA
• Texto a gran escala (120–150% mayor que el cuerpo de texto): 3:1 para el nivel AA y 4.5:1 para el nivel AAA
• Componentes activos de la interfaz de usuario y objetos gráficos como iconos y gráficos: 3:1 para un nivel AA. No está definido un ratio para el nivel AAA.

El color no lo es todo

¿Sabías que (aproximadamente) 350 millones de personas en el mundo son daltónicas? Seguro es un número más grande del que pensabas. Por lo tanto, es vital que analicemos cuidadosamente el nivel de contraste de los colores que elegimos para nuestra interfaz y que hagamos pruebas en escalas de grises. Es por este motivo que, por ejemplo, no podemos mostrar los mensajes de error ni pedirle a los usuarios que tomen decisiones sólo guiándolos con colores.

Dificultades temporales

Es importante que entendamos que no solo las personas con discapacidad pueden tener problemas para percibir el color y el contraste. Hay muchas limitaciones temporales que puede experimentar una persona, como una operación o tratamiento ocular que perjudique su visión durante un breve período de tiempo, o simplemente por el contexto en el que se encuentre: puede ser que esté en un ambiente con demasiada o muy poca iluminación o que por algún motivo deba reducir el nivel de brillo del teléfono porque está en el cine, por ejemplo. Como UX Designers, es nuestra tarea pensar en los diferentes contextos de uso que puede tener nuestro producto y actuar en consecuencia.

Paleta de colores accesibles

¡Es hora de ir a la práctica! Para comenzar a aplicar los conceptos que vimos, te dejo tres herramientas que te permitirán crear una paleta de colores accesible para tu UI.

• Palett.es: Te permite generar paletas cromáticas aleatorias y también a partir de un color concreto.
• Colorsafe.co: Genera el color ideal para el texto a partir de un color de fondo que definas como predeterminado. De esta manera, tendrás el contraste ideal para el color de tu interfaz.
• Accesible color palette builder: Haciendo clic en “editar paleta” podrás ingresar los colores de tu interfaz para que la herramienta te devuelva las combinaciones ideales de colores accesibles.

Además, te recomiendo la herramienta Funkify, es una extensión para Chrome que te ayuda a experimentar la web y las interfaces a través de los ojos de usuarios extremos con diferentes habilidades y discapacidades.

Accesibilidad y UX Writing

Crear un producto accesible es una tarea en conjunto, una filosofía y estándar de trabajo que atraviesa a todas las áreas involucradas. Resulta que, para desarrollar una interfaz accesible, no sólo deben tenerse en cuenta aspectos visuales y de programación que puedan diseñar y ejecutar esas acciones, también las palabras que usamos deben estar pensadas para ese fin. Uno de los aspectos más controversiales en lo que respecta a accesibilidad y contenido en español es el uso del universal masculino, una práctica que, desde el lenguaje, generaliza al masculino como único género con el que todas las identidades deben identificarse, sean o no masculinas.

¿Qué pasa con la “x”, el “@” y la “e”?

No es recomendable utilizar la “x” ni el “@” no solo porque vuelve inaccesibles a los textos debido a que no son legibles por los lectores de pantalla, sino porque, incluso en nuestra mente, siguen remitiendo a una imagen masculina. Tampoco es aconsejable el uso de la “e”, ya que no en todos los países es una práctica adoptada ni aceptada por la mayoría de la sociedad, a no ser que el research previo sobre tu target haya indicado lo contrario.

La solución más accesible y por lo tanto, conciliadora, es usar un lenguaje no sexista que mueva el foco de atención del masculino. Para ello, existen diversas técnicas (desde parafrasear una frase hasta utilizar pronombres relativos) que podemos emplear para expresarnos de forma más neutral sin reducir a otras identidades femeninas y no binarias.

Podemos reemplazar:

• “Bienvenido” por “Te damos la bienvenida”.
• “Bienvenido” por “Hola”.
• “Los argentinos” por “la población argentina”.
• “Los que compren el producto” por “quienes compren el producto”.
• “Los médicos” por “el personal de salud”.
• “Todos tienen derechos” por “todas las personas tienen derechos”.
• “Los interesados deben llenar el formulario” por “el formulario debe ser llenado”.

Escribir evitando el sexismo en el lenguaje es escribir para todas las personas por igual, para que se sientan incluidas e interpeladas por nuestros productos digitales. La lengua castellana es muy rica y ofrece diversas alternativas para lograrlo.

Herramientas online para testear la accesibilidad

En la web de w3.org pueden encontrar cientos de herramientas más, pero les adjunto 5 de ellas que me parecieron muy completas:

• Tawdis: Es una herramienta desarrollada por la Fundación CTIC que permite comprobar de forma automática distintos aspectos de las accesibilidad Web. https://www.tawdis.net/
• Accessibility Checker: Herramienta de auditoría gratuita que escanea el sitio en busca de los estándares WCAG actuales. Por cada error que encuentre el escáner, recibirás una explicación detallada al respecto, a quién afecta y múltiples opciones sobre cómo solucionarlo.
• Color a11y: Proporciona un análisis de contraste de color que mostrarán los problemas de contraste de color de una página web o el par de colores elegido; según las pautas WCAG 2.1.
• A11y-sitecheker: Compara un sitio completo con los criterios de accesibilidad. Utiliza ax-core para verificar sitios completos en busca de problemas.
• A11yWatch: Automatiza pruebas de accesibilidad web con herramientas útiles para mejorar la productividad en todas sus páginas de forma rápida y confiable.

Conclusión

Como diseñadores de experiencias es nuestra responsabilidad informarnos sobre accesibilidad para que, de esta manera, podamos generar experiencias verdaderamente significativas para quienes usan nuestros productos. Por supuesto que no todo el peso recae en nuestros hombros; como dije, el equipo de desarrollo es quien tiene el poder de ejecutar estas acciones al final del día. Sin embargo, debemos entender que si decimos a todo pulmón que nuestro trabajo busca buenas experiencias, deberíamos extender la promesa para todas las personas.

El mundo es diverso, las personas son diversas, y si no somos capaces de verlo, nos costará mucho más avanzar hacia un mundo más civilizado. Tiene que ver con el modo en el que decidimos hacer tecnología y reconocer que, si no somos nosotros quienes tomamos la iniciativa, ¿quién lo hará?