Accesibilidad en el diseño UX

La Accesibilidad como parte del diseño UX

Tu web para todas las personas

Decimos que un sitio web es accesible cuando puede ser utilizado de forma eficaz por el mayor número posible de personas, independientemente de sus limitaciones personales.

Cuando un diseñador web inicia un proyecto, necesariamente debe hacerlo enfocado en las personas para las que está diseñando, es decir, los usuarios. Diseñar no se trata únicamente de hacer cosas bonitas y estéticas, y mucho menos cuando hablamos de UX (user experience), la experiencia de usuario.

Si no queremos perder un usuario que ha entrado en nuestra web porque no puede hacer un uso sencillo de ella, debemos ofrecerle una experiencia lo más agradable y fácil posible, mejorando así su satisfacción y lealtad a través de la utilidad, facilidad de uso y placer proporcionado en la interacción con nuestra web.

En una sociedad, por suerte, diversa y con personas con diferentes capacidades, habilidades, etc., cuando diseñamos contemplamos siempre esta diversidad. Un diseño de experiencia de usuario, aunque se oriente a un target específico (o no), deberá siempre evitar la discriminación por razón de género, raza, edad y, por supuesto, discapacidad. Los diseños inclusivos permitirán a cualquier usuario navegar por nuestra web y lograr sus objetivos en ella.

El tema de la accesibilidad es complejo, y existen en la actualidad diversas herramientas que complementarán esta virtud en nuestra web, pero hay una serie de puntos esenciales muy muy básicos en relación a diseñar una web accesible.

Aunque existe una norma UNE de criterios de accesibilidad, es común olvidar puntos importantes. Las pautas se organizan en 4 principios básicos o fundamentales: perceptibilidad, operabilidad, comprensibilidad y robustez. Este artículo solo pretende recordar aspectos básicos introductorios para facilitar el uso de todas las personas en tu web.

Aspectos esenciales para que tu web sea accesible

  1. No utilices solo el color como recurso visual para dar información.

Obviamente el color es el aliado más especial de un diseñador, pero este no puede ser el único indicador de una información. Siempre se deberá complementar.

2. Garantiza siempre un suficiente contraste entre texto y fondo.

Los textos deben ser legibles en tamaño y suficientemente contrastados con el fondo. No utilices colores demasiado claros y presta especial atención a los formularios, que se lea el título de cada campo.

3. No te olvides del teclado.

Incorpora atajos con el teclado, diferentes formas de navegación. Esto es especialmente aplicable en apps web.

4. Cuidado con los formularios

Además de asegurar un buen contraste en los textos de un formulario, usa ejemplos de lo que hay que completar, identifica los errores no solo en rojo sino con alguna otra alerta no basada en el color. Añade también una frase para aclarar si un campo no ha sido completado correctamente o hay cualquier otro error.

5. Incluye siempre «text alt»

El texto alternativo en todas las imágenes es fundamental si queremos crear un diseño para todos. Describe siempre qué aparece en ellas intentando no repetir el texto del pie de foto.

6. No hagas que las personas pasen el ratón para encontrar cosas

Nos encantan los efectos al pasar el mouse, pero ¡ojo!, esto debe ser un recurso estético añadido, intenta que no sea la única manera de saber que el elemento se trata de un botón o enlace.

Recuerda la importancia de la navegación web

El principal objetivo de una web es que el usuario pueda comprender una información que queremos transmitir. Por ello, para que todas las personas puedan lograr su objetivo y evitar la frustración en la interacción con nuestra marca, jamás debemos subestimar la importancia de la navegación en nuestra web.

¿Tenemos una buena arquitectura de contenidos? Necesitamos tener una página web bien estructurada, presentar opciones de navegación múltiples y disponer de enlaces claros. Generar mapas de sitio pensados para el usuario nos ayudará con esto.

Para terminar, en el siguiente enlace os dejo un enlace a recursos de diseño inclusivo de Microsoft: https://www.microsoft.com/design/inclusive/

¡Diseña siempre para todos!

CONTACTA CON NOSOTROS