Accesibilidad y UX ¿Por donde empezar?

Manuel Serrano
5 min readFeb 18, 2023

Uno de los retos más interesantes para nuestro equipo este año es mejorar la accesibilidad en nuestros diseños. Como diseñadores, es nuestra responsabilidad garantizar que todos los usuarios, independientemente de sus habilidades, puedan acceder y utilizar nuestros productos y servicios. En este artículo, exploraremos los principios y consejos para que un sistema de diseño o simplemente tus diseños, sean algo más accesibles y cómo podríamos aplicarlos a nuestro trabajo diario.

Según el W3C, la accesibilidad web es “la práctica de asegurar que todas las personas, independientemente de su discapacidad, tengan igualdad de acceso a la información y funcionalidad en línea”. Esto implica diseñar productos y servicios que sean utilizables por todos los usuarios, incluidos aquellos con discapacidades visuales, auditivas, motoras o cognitivas.

La accesibilidad no solo beneficia a los usuarios con discapacidades. Un diseño accesible también mejora la experiencia para todos los usuarios. Por ejemplo, un sitio web con una estructura clara y una navegación fácil de usar puede ser beneficioso para personas con discapacidades cognitivas, así como para aquellos que navegan en línea con un dispositivo móvil o en un entorno con poca luz 🤯.

Para garantizar que nuestro diseño sea accesible, debemos seguir ciertos principios y pautas. Aquí hay algunos ejemplos y principios para que un diseño sea accesible:

  1. Mejora el feedback de tus componentes

En lugar de diseñar para un tipo específico de usuario, debemos diseñar para todos los usuarios. Como mencionan Steve Krug y Don Norman en sus libros de referencia en UX, los usuarios no deberían tener que pensar para usar un producto. Nuestro diseño debe ser lo suficientemente intuitivo y fácil de usar para que todos los usuarios puedan comprenderlo.

Por ejemplo es común que se utilice solo el color rojo, para indicar un mensaje de error, pero para este tipo de casos sería insuficiente.

Para mejorar estos componentes y que sean accesibles, deberían ser reforzados, con algún tipo de icono que sea fácilmente distinguible o mensaje que le acompañe.

Ejemplo de como ve una persona con daltonismo colores en un componente

Imagen sacada de UIFROMMARS

2. Proporciona alternativas

Los usuarios con discapacidades visuales o auditivas pueden tener dificultades para acceder a los medios como imágenes, videos o audio. Por lo tanto, debemos proporcionar alternativas a los medios que utilicemos para que los usuarios puedan comprender el contenido sin depender exclusivamente de estos.

Por ejemplo, incluir subtítulos para los videos y descripciones de texto alternativas para las imágenes. Podemos incluir gráficos y tablas, para aquellos que tienen dificultades para leer el texto. Al proporcionar alternativas, podemos garantizar que todos los usuarios puedan acceder y comprender el contenido de nuestro diseño.

3. Utiliza un lenguaje claro

La estructura de nuestro diseño debe ser clara y fácil de usar. Debemos utilizar un lenguaje sencillo y directo para comunicar la información de manera efectiva. Los usuarios con discapacidades cognitivas pueden tener dificultades para comprender el contenido complejo o las estructuras complicadas, por lo que debemos simplificar la información y organizarla de manera lógica.

Debemos evitar utilizar jergas y lenguaje técnico que puedan ser confusos para algunos usuarios. El lenguaje que utilizamos en nuestro diseño debe ser simple y claro para que todos los usuarios puedan comprenderlo.

Encuesta importancia real en diseño web

4. Testea con usuarios con discapacidades

Es esencial probar nuestro diseño con usuarios con discapacidades para identificar cualquier problema de accesibilidad. Podemos colaborar con organizaciones o grupos de usuarios con discapacidades para obtener comentarios y perspectivas valiosas sobre cómo mejorar la accesibilidad de nuestro diseño.

Al probar con usuarios con discapacidades, podemos identificar y corregir problemas que pueden pasar desapercibidos para aquellos sin discapacidades. Esto también nos ayuda a entender mejor las necesidades y desafíos de los usuarios con discapacidades, lo que nos permite diseñar para sus necesidades específicas.

Collage accesibilidad

5. Preocúpate y ten en cuenta el contraste

El contraste es una de las consideraciones más importantes para garantizar que un componente sea accesible para alguien con problemas de visión. El texto y los iconos deben tener un contraste suficiente con el fondo para que sean legibles. La mayoría de las pautas de accesibilidad sugieren un contraste mínimo de 4.5:1 entre el texto y el fondo.

Comparativas de ratios

PS, te chivo un Plugin interesante para Figma -> STARK

6. Tamaño de las fuentes

El tamaño del texto es otra consideración importante. El texto debe ser lo suficientemente grande para ser legible. La mayoría de las pautas de accesibilidad sugieren un tamaño de fuente mínimo de 16 puntos o 12 puntos negrita.

Aunque en algunos casos esto pueda ser un tamaño de fuente muy grande, siempre deberíamos tener una opción en la que el usuario pueda aumentar esta fuente.

Ejemplo aumento de fuente de texto

7. Uso de iconos

Los iconos pueden ser útiles para proporcionar información visual, pero deben ser utilizados de manera adecuada y estar acompañados de texto para garantizar que los usuarios con discapacidades visuales puedan entenderlos. Siempre es recomendable utilizar iconos simples y claros que sean fácilmente reconocibles.

Imagen de ejemplos de mejora en arquitectura para la reducción de movilidad

Conclusiones

Al hacer nuestro diseño accesible, podemos mejorar la experiencia del usuario y garantizar que todos los usuarios, independientemente de sus habilidades, puedan acceder y utilizar nuestros productos y servicios.

Es un cámino largo, interesante y a la vez que gratificante.

--

--