Accesibilidad: diseñar para todas las personas
Conoce cómo aplicar la accesibilidad web en nuestros equipos de diseño: consejos y una checklist para comenzar a implementar.
La accesibilidad es un derecho universal, por lo menos desde el 2006, según la Convención Internacional sobre los Derechos de las Personas con Discapacidad firmado por la ONU. Sin embargo aún nos encontramos trabajando en equipos donde estos temas no se abordan o se dejan para el final de todas las tareas.
Viendo esta situación recurrente es que escribo este post, para motivar a incorporar esta necesidad de pensar en diseño accesible como parte de las tareas del día a día.
Para empezar me gustaría definir accesibilidad y discapacidad:
La accesibilidad es el grado en que las personas pueden utilizar un producto, acceder a un servicio o realizar una actividad y esto no depende en ningún momento de sus capacidades técnicas, cognitivas o físicas. Es tratar a todes de la misma manera, brindar las mismas oportunidades sin importar su habilidad y circunstancia.
¿Y la discapacidad? Según el modelo social, esta surge en la interacción de las personas con otras personas o con las cosas. El medio o la interacción con el entorno es quién genera barreras y define si una persona tiene o no discapacidad.
Por ejemplo, si tengo que completar una tarea en la que debo escuchar y responder y estoy cuidando a mis sobrinos que gritan, no podría completarla. Esto sería una barrera en la interacción con el producto.
¿Cómo aplicar accesibilidad?
Lo primero a tener en cuenta es entender que no diseñamos para una masa homogénea. Cada persona que está interactuando con nuestro producto o servicio tiene una necesidad especial dependiente del contexto y la situación en la que se encuentra; muchas veces, muy diferente de lo que imaginamos.
Es por esto que hablar con personas usuarias nos da mucha información, así como observar e indagar en su contexto. Por ejemplo cuando hacemos una entrevista en remoto podemos ver desde dónde y cómo se conecta la persona (¿desde su cama? ¿quizás está en un coche?) y hacernos una imagen real de quienes utilizan nuestros productos (¿son personas mayores, adolescentes?), cómo lo hacen y detectar posibles oportunidades que no habíamos contemplado.
Pensemos también que aplicar accesibilidad es hacer foco en todas las barreras existentes (permanentes, temporales y también situacionales).
Esta tabla, que aparece en el libro de Olga Carreras y Olga Revilla, Accesibilidad Web, WCAG 2.1 muestra problemas frecuentes que debemos contemplar para no generar barreras en la interacción:
Consejos fáciles para aplicar
Comparto 5 tips de algunas buenas prácticas que podemos aplicar en nuestros equipos de diseño desde ahora:
1. Color y contraste
La presentación de textos e imágenes de texto debe tener un ratio de contraste de al menos 4.5:1, excepto en textos grandes (14 o 18 puntos) donde es suficiente un ratio de 3:1 o si el texto forma parte de un logotipo o nombre de marca, aquí no hay requisitos de contraste.
Aquí te dejo un plugin de Figma para comprobar el contraste de color.
2. Estructuras coherentes
Favorecer los campos de texto alineados a la izquierda facilita la lectura. Mantener un diseño simple y consistente. La coherencia entre pantallas hace más fácil predecir dónde se pueden encontrar las cosas en cada sección. Un ejemplo quizás muy obvio pero a tener en cuenta: en procesos de varios pasos debemos mantener la barra de progreso siempre en el mismo lugar.
3. Textos claros y sencillos
Los textos que aparecen en nuestros productos deben ser fáciles de entender y comprender sin utilizar tecnicismos específicos que a veces solemos utilizar internamente. Algunas preguntas que podemos hacernos para ver si cumplimos con esto es: ¿Los títulos son descriptivos y tienen relación con la información que se muestra al usuario? ¿Los botones tienen nombres concretos e indican que pasará al clickear sobre ellos?
4. Mini padding y áreas clickeables
Diseñar botones fácilmente reconocibles. Deben tener como mínimo 44 píxeles de alto x 44 de ancho. Si no es posible tener un botón de este tamaño, deberíamos asegurarnos que el área activa si lo sea.
5. Color si, pero como acompañante
El uso del color puede mejorar la comprensión, pero no debe usarse como recurso exclusivo para transmitir información. Por ejemplo: Ejemplo: usar el rojo para error y el verde para éxito sin dar contexto de los mismos no alcanza para comunicar correctamente.
Checklist de implementación
Te comparto esta checklist, para que puedas utilizar y tener en cuenta al momento de diseñar:
Tamaño y tipografía
- ¿La tipografía tiene unos tamaños de entre 14 y 18 puntos?
- ¿Los títulos siguen un orden correcto?
- ¿En los párrafos de texto mantenemos un interlineado de 1.5 veces el tamaño de la fuente?
Colores y contrastes
- ¿Hemos chequeado que el uso de color en nuestras pantallas es accesible?
- ¿Los elementos se pueden identificar con otro recurso aparte del color?
- ¿Los elementos gráficos tienen un contraste de color mínimo con respecto a su fondo?
Contenido
- ¿Los títulos son descriptivos y tienen relación con la información que se muestra al usuario?
- ¿Los botones tienen nombres concretos e indican que pasará al clickear sobre ellos?
- ¿Ofrecemos texto alternativo y descriptivo en todas las imágenes?
Elementos gráficos
- ¿Utilizamos links con el texto subrayado?
- ¿Utilizamos placeholders para aportar información o ejemplificar?
- ¿Los botones tienen una caja contenedora?
Orden de lectura y orden visual
- ¿Mantenemos una consistencia entre lo que comunicamos y la ubicación de los elementos?
- La información más importante, ¿está ubicada a primer nivel?
Animaciones y videos
- ¿Las animaciones son sencillas, lentas o sin cambios de color?
- En los videos ¿estamos ofreciendo subtítulos?
- ¿Las imágenes están acompañadas de apoyo textual para comprenderlas?
Conclusión
Espero que este post te haya servido de ayuda tanto para ti como para compartir y utilizar en tu equipo de diseño. Si es así, compártelo para seguir difundiendo la importancia de la accesibilidad en el diseño de interfaces.
Y si crees que necesitas ayuda extra o auditar tu producto para pulirlo, recuerda que puedes contar con nuestro servicio de UX accessibility audit.
