Cómo hacer un Design System teniendo en cuenta la accesibilidad

Un Design System es un manual de normativas, patrones de interacción y componentes para diseñar un producto o servicio digital.  Se trata de un catálogo de elementos orientado a 2 grandes objetivos: aportar consistencia al diseño de producto y agilizar su proceso mediante la adaptación de componentes base ya creados. Por este motivo, tener un Design System que no tenga en cuenta la accesibilidad puede provocar que todo cuanto se construya sobre el mismo no pueda ser utilizado por todo el público objetivo.

Si los componentes de un Design System se crean desde la base con todos los parámetros de accesibilidad establecidos, es más fácil construir productos y servicios que no dejen fuera a ningún tipo de usuario. De esta forma, se constituye un sistema controlable y escalable de accesibilidad, que resulta más ágil y económico que la implantación de medidas posteriores para cada pieza o elemento de diseño.

La importancia de la accesibilidad

¿Sabías que el 15% de la población mundial tiene algún tipo de discapacidad? O, lo que es lo mismo, unos 900 millones de personas en todo el mundo. 
Existen muchos tipos de discapacidad, que se dividen en 3 grandes bloques en función de si suponen limitaciones permanentes, temporales o situacionales para el usuario.

Cómo hacer un Design System teniendo en cuenta la accesibilidad
Diferentes tipos de discapacidades permanentes, temporales y situacionales
Fuente: Medium

Estos son algunos de los tipos de discapacidad que existen y que se deben tener en cuenta a la hora de diseñar:

  • Discapacidades visuales. Incluyen desde la baja visión debido a un entorno mal iluminado, hasta los casos de ceguera parcial o total. También tienen en cuenta una abundante cantidad de usuarios con problemas de miopía, astigmatismo o daltonismo, entre otros.  
  • Discapacidades auditivas. Engloban a individuos con diferentes niveles de pérdida de audición, desde aquellos afectados por un fenómeno temporal (como haber salido de un lugar ruidoso) hasta quienes sufren de sordera total.
  • Discapacidades motoras. Incluyen las alteraciones en el aparato locomotor, lo que deriva en problemas de coordinación y movimiento del cuerpo. Estos usuarios suelen tener dificultades para manipular objetos y manifiestan una menor velocidad de reacción.
  • Discapacidades cognitivas. Tienen en cuenta las dificultades de concentración debido a una situación de cansancio o estrés del individuo, así como las alteraciones permanentes en la capacidad de aprendizaje y memoria. 

¿Por qué la accesibilidad mejora la experiencia?

Diseñar teniendo en cuenta las premisas de accesibilidad contribuye a crear un servicio para personas con todo tipo de necesidades.. En lugar de que sea el usuario quien se adapte al producto digital, es este quien ofrece facilidades para que el usuario avance por el camino que prefiera.

Por ejemplo, el caso de una página donde se ha incluido al inicio un listado con enlaces a los diferentes apartados que se encuentran debajo. Este sistema accesible de jerarquización de la información permite a los usuarios con lector de pantalla saber rápidamente si esa página tiene la información que están buscando. Otros usuarios sin lector, pueden usar la misma tabla para moverse por la página y  acceder a cada sección sin necesidad de hacer scroll.

Diseño accesible y diseño universal

Pongamos un ejemplo para entender mejor la diferencia entre estos 2 conceptos. Tenemos un portal de un edificio con escaleras, el cual dificulta la entrada para personas mayores, personas con muletas, sillas de ruedas, carritos de bebé, etc. En este caso, con el diseño accesible construiríamos una rampa perfecta al lado de las escaleras. De este modo, algunos accederían por las escaleras y otros por la rampa. En cambio, con el diseño universal, haríamos obras y quitaríamos las escaleras para que todos entraran de la misma manera al edificio. 

Ambos buscan el acceso de toda la población a todos los servicios, productos, entornos e información, pero de distinta forma. El diseño universal es “el diseño de productos y entornos para ser utilizados por todas las personas, en la mayor medida posible, sin la necesidad de adaptación o de un diseño especializado”, tal y como definió Ronald L. Mace, en 1997.

El diseño universal se basa en 7 grandes principios:

  • Igualdad de uso: el diseño debe ser sencillo y adecuado para diferentes capacidades y habilidades.
  • Flexibilidad: debe ser capaz de adaptarse a numerosas preferencias y habilidades.
  • Simple e intuitivo: debe resultar intuitivo y facilitar la comprensión a todo tipo de usuarios, independientemente de su experiencia, conocimientos y habilidades.
  • Información fácil de percibir: debe ser capaz de compartir información con el usuario, incluso ante condiciones ambientales adversas o una capacidad sensorial reducida.
  • Tolerante a errores: debe reducir el riesgo al error del individuo y las consecuencias negativas derivadas del mismo.
  • Escaso esfuerzo físico: debe reducir el esfuerzo físico necesario para su uso.
  • Dimensiones apropiadas: debe facilitar el alcance y manipulación de los elementos mediante la gestión de los tamaños y espacios. 
Cómo hacer un Design System teniendo en cuenta la accesibilidad
Los audiolibros son un ejemplo de diseño universal que permite el acceso a la lectura a personas con discapacidades visuales o a niños que aún no saben leer, por ejemplo.
Fuente: Friday We’re in Love

Normativas y herramientas de accesibilidad

Las normativas de accesibilidad han consolidado  un conjunto de buenas prácticas que deben aplicarse durante el desarrollo del contenido web para ser considerado como accesible. En el caso de Europa y Estados Unidos, por ejemplo, existe la obligación de cumplir con unos estándares similares a los del WCAG2.1 o su equivalente ISO 40500. 

De la misma forma, el interés por implantar estas medidas ha permitido la creación de numerosas herramientas. Una de las más conocidas es Accessibility Checker, un servicio que puntúa las páginas web según su nivel de accesibilidad, detectando sus problemas y ofreciendo recomendaciones sobre cómo resolverlos. Su modelo ha sido replicado por muchas otras plataformas, lo que facilita el análisis sobre la accesibilidad de prácticamente cualquier entorno. 

Qué debe tener en cuenta un Design System accesible

Un Design System accesible es eficaz cuando incluye un conjunto de componentes accesibles básicos que establecen las tipografías, espacios o tamaños, y que pueden utilizarse como punto de partida para el diseño de cualquier producto o elemento de la compañía. Su objetivo es eliminar la toma de decisiones sobre accesibilidad por parte de los diseñadores, de manera que estos puedan ser más ágiles y centrarse íntegramente en la vertiente del diseño. 

A la hora de definir un sistema accesible, el organismo oficial World Wide Web Consortium (W3C) ha creado múltiples recomendaciones, entre ellas:  

  • Usar texto alternativo en las imágenes.
  • Definir estructuras jerarquizadas. 
  • Utilizar encabezados
  • Incluir enlaces internos y externos.
  • Añadir transcripciones para los recursos multimedia.
  • Permitir la omisión de elementos repetitivos en una página.
  • Elegir los colores adecuados teniendo en cuenta el contraste, el simbolismo de cada tono, el modo oscuro y los usuarios con daltonismo. 

Reforzando este último punto, son muchos los estudios sobre las prácticas de accesibilidad vinculadas al uso del color y actualmente existen herramientas muy completas sobre su análisis. Uno de los mejores ejemplos es el nuevo algoritmo APCA, que valora el contraste percibido en base a los tamaños del texto y del fondo, pero también del tamaño y el peso de las fuentes. Para los diseños en Figma existe el plugin A11y – Color Contrast Checker, que analiza la viabilidad de los contrastes y ofrece consejos para adaptarlos a las normativas vigentes.

¿Tienes dudas acerca de cómo implantar medidas de accesibilidad en tus productos digitales? Contáctanos y te asesoraremos de forma personalizada sobre cómo mejorar tu producto o servicio.