Cómo hacer un diseño inclusivo

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.

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.