La accesibilidad en el diseño de productos digitales es muy importante, no sólo para proporcionar un acercamiento equitativo a las personas con discapacidad, sino porque nos beneficia a todos.
Si para una reunión olvidamos el mouse en casa, tendremos que navegar con el teclado. O si queremos ver un vídeo pero no tenemos auriculares, echaremos de menos los subtítulos si estamos en una biblioteca. También hay personas que pudiendo leer, usan el lector de pantalla como si fuera un audio libro.
Por estas y muchas otras razones, diseñar un producto accesible se ha convertido en una necesidad en cualquier negocio digital. A continuación exponemos unas pautas de cómo diseñar un producto accesible.
Cómo diseñar un producto accesible
La accesibilidad se debe abordar desde las primeras fases del diseño, ya que no se trata de hacer ajustes en función de los diferentes tipos de usuarios, sino de hacer una interfaz genérica, en la que todos los grupos queden representados.
A continuación se exponen varios ejemplos de patrones de diseño inclusivos.
Jerarquía
Para los lectores de pantalla, se deberán colocar las acciones importantes en la parte superior o inferior de la pantalla y los elementos de una misma jerarquía uno al lado del otro. El tamaño y peso elegidos para los textos también establecen una jerarquía, donde los textos con mayor tamaño de fuente o en negrita tendrán mayor importancia y así se representa.
«Diseñar un producto accesible se ha convertido en una necesidad en cualquier negocio digital.»
Contraste
Hay que tener en cuenta que un tamaño de texto pequeño requiere mayor contraste para ser más legible. El WC3 recomienda una relación de al menos 4.5:1 entre el color del texto y el color de fondo, disminuyendo a un mínimo de 3:1 cuando la fuente es más grande (14 pt en negrita / 18 pt o superior). Estas relaciones son aplicables también a iconos y otros componentes.
Color
No se debe usar como único medio para transmitir información, sino como un complemento que se apoye de textos, símbolos y texturas. Las personas daltónicas o con problemas de visión deberían ser capaces de identificar lo que está pasando en una interfaz en blanco y negro.
Etiquetas y formas
En formularios y búsquedas, la etiqueta del campo que estamos rellenando debe estar siempre visible y estar bien definida. La etiqueta nos indica el propósito del campo en todo momento, por eso debería de permanecer incluso después de escribir en él. En estos componentes también se deben evitar elementos sin bordes y crear formas tangibles para desencadenar una acción o desplazamiento.
Objetivos táctiles y de puntero
Los componentes de la interfaz con los que interactúan los usuarios deben ser de al menos 48×48 dp para dispositivos móviles (44×44 dp en iOS) y los objetivos de puntero (para ratón o lápiz óptico) deben tener un mínimo de 44×44 dp.
Indicadores de enfoque (en web)
Sirven de guía para saber dónde se está cuando se usa el tabulador para moverse por una web. Es importante no prescindir de estos focos, ya que personas ciegas que necesitan lectores de pantalla, o personas con movilidad reducida, hacen gran uso de ellos.
Elementos gráficos
Se recomienda agregar etiquetas de texto alternativo para las imágenes y evitar el uso de efectos ‘hover’, ya que estos son difíciles de navegar para personas con discapacidades motoras y pueden dificultar el acceso al producto o servicio. También es importante proveer opciones de narración para las personas con discapacidades visuales y transcripciones de vídeo o audio para aquellas con discapacidades auditivas.
Texto
Durante investigaciones con personas mayores, es muy frecuente escuchar quejas respecto al tamaño de las fuentes utilizadas en webs y aplicaciones. Para garantizar comodidad de lectura, los diseñadores deben usar tamaños de fuente razonablemente grandes y usar un tipo de letra limpio.
Otras buenas prácticas que también podemos aplicar con respecto al texto son, por ejemplo:
- Evitar el justificado porque crea patrones que entorpecen la lectura a personas con dificultades para el aprendizaje o que padecen dislexia.
- No abusar ni de la cursiva ni de las mayúsculas en párrafos largos.
- Servirse de texto alternativo para transmitir lo que muestra una determinada imagen, tanto a personas invidentes a través de lectores de pantalla, como a los que pueden ver pero han tenido un problema al cargar la imagen.
«La accesibilidad se debe abordar desde las primeras fases del diseño, ya que no se trata de hacer ajustes en función de los diferentes tipos de usuarios, sino de hacer una interfaz genérica, en la que todos los grupos queden representados.»
Herramientas para hacer diseños accesibles
A continuación tenemos algunas herramientas que usan diseñadores y desarrolladores para hacer los productos accesibles:
- Listado de patterns de ARIA Authoring Practices Guide (APG). Repositorio y explicación de los patterns básicos que tiene un producto digital y cómo mejorar con ellos la accesibilidad.
- Human interface guidelines – Accessibility. Recomendaciones para maximizar la accesibilidad en el diseño de interfaces de Apple.
- Accesibilidad para desarrolladores. Apple ofrece información sobre cómo emplear su Accessibility API para hacer sus productos funcionales para el mayor número de usuarios posible.
- Accessibility scanner. Permite identificar aspectos a mejorar la accesibilidad en tu aplicación para Android.
- Material design – Accessibility. Principios de diseño accesible aplicables al sistema de diseño de Google .
- Microsoft Design – Inclusive design. Manual de diseño inclusivo de Microsoft con vídeos, artículos y otros materiales divulgativos.
- Desarrollo de aplicaciones accesibles. Recursos, documentación y vídeos sobre accesibilidad para desarrolladores de tecnología Microsoft.
También te puede interesar
-
11 juegos para testear tus UX/UI skills
UX/UI
13 septiembre 2023
Te presentamos una lista de juegos para poner a prueba tus habilidades. ¿Estás preparado?
-
Diseñar como medio, no como fin
UX/UI
5 septiembre 2023
Reflexionamos sobre la diferencia entre el diseño y las herramientas de diseño, así como su valor en el ejercicio de nuestra profesión.