Diseño Web Inclusivo: una guía para iniciarte en esta disciplina.

El diseño web inclusivo es cada vez más relevante. Es una parte clave de los sitios web exitosos, porque permite asegurar que la mayor cantidad posible de usuarios finales puedan acceder y disfrutar del sitio.

Entonces, ¿qué pasaría si descubrieras que alrededor de mil millones de personas no podrían disfrutar de tu sitio? Incluso si esas personas logran hacer clic en un vínculo y visitar tu site, es posible que no puedan comprender lo que se vende o llegar hasta la página de pago.

Según las estadísticas del Banco Mundial, hay mil millones de personas con discapacidad en todo el mundo. Eso es el 15% de la población total del planeta.

A pesar de esto, muchos diseñadores no solemos tener en cuenta a los clientes con capacidades especiales al crear una aplicación o un sitio web atractivo. A menos que tu cliente te diga explícitamente que está apoyando a clientes con discapacidades, es posible que ni siquiera pienses en esos usuarios en absoluto.

Aprender a adoptar el concepto de diseño web inclusivo significa ofrecer mejores resultados a tus clientes; Cuantos más clientes puedan llegar a sus clientes, más elogios y críticas positivas recibirán tus diseños. ¿Cool no?

Entonces, ¿cómo introducir la accesibilidad en tus proyectos de diseño web?

¿Qué es la accesibilidad web?

En términos generales, la inclusión se refiere a actividades o comportamientos que empoderan a las personas con capacidades especiales. Diseñar para la inclusión, significa hacer que tu contenido sea más accesible para cualquier persona que se enfrente a un problema mental o físico, que pueda dificultar el uso de un web site tradicional.

La accesibilidad es uno de los principales objetivos de una estrategia de diseño web inclusivo. Cuando haces que los sitios web o las aplicaciones sean más accesibles, modificas aspectos de su interfaz de usuario y código para que el sitio sea lo más accesible y utilizable posible para las personas con ciertas limitaciones o capacidades especiales.

De acuerdo con la Iniciativa de Accesibilidad Web, muchos sitios y herramientas web modernos están diseñados sin tener en cuenta las necesidades de las personas con capacidades especiales. Esto crea barreras de accesibilidad que hacen que los sitios web sean casi imposibles de usar para algunas personas.

Estos son solo algunos de los diferentes tipos de dificultades que pueden afectar la forma en que los usuarios finales interactúan con un sitio web o una aplicación:

• Cognitivas: afectan la comprensión e interfieren la navegación por los sitios;
• Auditivas: evitan que los clientes escuchen videos y contenido de audio;
• Neurológicas: hacen que ciertos términos y acciones sean más difíciles en tu sitio;
• Físicas: dificultan el deslizamiento o el toque de ciertas herramientas;
• De habla: un problema común con los diseños de la interfaz de usuario de voz;
• Visuales: evitar una experiencia positiva en sitios muy visuales.

La accesibilidad web también puede contribuir a facilitar la vida de las personas que se encuentran con problemas en situaciones particulares. Por ejemplo, aquellas personas con problemas musculares pueden tener más dificultades para usar botones y enlaces en una pantalla pequeña.

¿Cómo puedes hacer que tus diseños sean más accesibles?

Conoce a tu audiencia

Hay más en el diseño web inclusivo que hacer tus fuentes un poco más grandes y esperar que ocurra lo mejor. Para ofrecer una experiencia verdaderamente accesible, necesitas conocer a las personas y los grupos a los que se dirige tu cliente. Dedicar algo de tiempo a analizar los personajes de los usuarios de sus clientes y hacerles preguntas sobre las personas con discapacidades puede ayudarte a tomar decisiones informadas.

Por ejemplo, el kit de herramientas de diseño inclusivo de Microsoft pide a los diseñadores que reconozcan la exclusión, examinen las partes de su sitio web que podrían ser inaccesibles y aprendan de la diversidad.

Antes de diseñar cualquier cosa, pregúntate si puede:

• Abordar cualquier necesidad única, como problemas visuales o auditivos;
• Reemplazar las soluciones tradicionales con algo más exclusivo. Por ejemplo, en lugar de depender de los colores para resaltar una parte del texto, ¿podrías utilizar el peso de la fuente? Esto podría ser ideal para alguien con daltonismo;
• Crear algo que atraiga a los clientes con y sin discapacidades.

Diseña un layout limpio y claro

Cualquier diseño de sitio web debe centrarse primero en la claridad.

Ya sea que estés diseñando para la inclusión o no, el objetivo debe ser brindar una experiencia lo más simple y directa posible, evitando cualquier «pecado del diseño web» en el camino.

Por ejemplo, a nadie le gusta un diseño desordenado lleno de señales de navegación irrazonables. Necesitas un sitio lleno de enlaces comprensibles, botones en los que sea fácil hacer clic en cualquier pantalla y fuentes grandes que sean fáciles de leer.

Recuerda, cuando esté diseñando un prototipo inclusivo:

• Prueba las opciones de navegación y asegúrate de que sean fáciles de usar;
• No sobrecargues la pantalla, recuerda que menos es más al reducir la carga cognitiva;
• Asegúrate de que tu diseño sea fácil de usar en cualquier pantalla.

Simplifica el lenguaje

Los elementos visuales de un sitio web inclusivo deben ser lo más simples y fáciles de entender posible. Sin embargo, también es importante no olvidar la forma en que maneja la palabra escrita.

El uso de términos simples en lugar de la compleja jerga de la industria puede marcar una gran diferencia para quienes tienen problemas de lectura. También hay que pensar en la tipografía, desde el color y el contraste de tus palabras con el fondo elegido hasta la claridad de la fuente.

Recuerda, el diseño subóptimo con imágenes y lenguaje también afecta a quienes no tienen discapacidades. Seguir las reglas básicas para simplificar ofrece una mejor experiencia para cualquiera que visite su sitio.

Asegúrate de:

• Subrayar, negrita o cambiar el tamaño de los enlaces para el contraste visual;
• Aplicar el espaciado de línea adecuado con alrededor de 1,5 veces el tamaño de fuente;
• Habilitar el espaciado de párrafo de forma consistente;
• Utilizar un lenguaje sencillo para reducir la carga cognitiva;
• Describir las abreviaturas cuando las uses;
• Utilizar títulos claramente redactados para estructurar el contenido de manera lógica;

Mira las opciones de diseño de texto en el sitio web de Nomensa, por ejemplo. Un montón de espacio en blanco hace que el contenido sea más fácil de leer. Las palabras simples son comprensibles y atractivas. Incluso la elección de la fuente imita el logotipo a la vez que ofrece legibilidad.

Optimiza los colores del diseño web

Las tendencias de diseño web inclusivo vendrán y se irán. Sin embargo, el color y el contraste siempre serán fundamentales para tus decisiones.

Asegurarse de que tus elementos de diseño cumplan con las proporciones mínimas de contraste de color definidas por las WCAG significa que está respaldando la legibilidad para los usuarios con discapacidad visual y mejorando las experiencias para los clientes que no tienen discapacidad visual también.

Para los diseñadores que necesitan ayuda adicional en esta área, herramientas como Stark ayudan a medir el contraste de color. Esta herramienta también ofrece una gama de otras funciones destinadas a respaldar la accesibilidad web.

Recuerda, la proporción mínima a la que necesita acceder dependerá del elemento que estés diseñando. La WCAG recomienda las siguientes pautas:

• Relación de 3: 1 para objetos gráficos (cuadros);
• Relación de 3: 1 para enfoque, estados activos y desplazamiento;
• Relación de 3: 1 para elementos en los que se puede hacer clic y componentes de formulario.

Mientras trabajas en tus estrategias de contraste de color con aplicaciones como Stark, asegúrate de considerar también las necesidades de los usuarios con daltonismo. El 4,5% del mundo no ve el color de la misma manera que todos los demás. Si te resulta difícil lograr el contraste correcto mientras incorporas las pautas de marca de tu cliente, intenta subrayar y resaltar también los elementos.

Considera elementos de video y audio

Finalmente, en estos días, más empresas están optando por incorporar contenido de video y audio en sus sitios. Estas herramientas visuales y auditivas pueden ofrecer información útil sobre una marca y lo que hace. Sin embargo, podrías tener dificultades para entregar información vital a algunos clientes solo a través de video y audio.

Los subtítulos para el contenido de video pueden ser esenciales para las personas con pérdida auditiva. Es posible que debas pensar en agregar transcripciones a videos pregrabados a los que puedan acceder las personas con discapacidad auditiva. Estas transcripciones y subtítulos también son útiles para cualquier persona que no tenga acceso al audio en teléfonos inteligentes o computadoras.

Las transcripciones también pueden ayudar a las personas con discapacidades visuales al brindarle a una herramienta de conversión de texto a voz algo para describir a tu usuario. De esa forma, todos obtienen información útil.

Mira este video subtitulado de la Universidad de Washington, por ejemplo. Garantiza que todos puedan comprender lo que sucede en el contenido. Si agregas transcripciones a las páginas de tu sitio web para los clientes, también podrías ayudarlos a beneficiarse de un SEO mejorado. Las transcripciones brindan más oportunidades de clasificación de palabras clave que los videos y podcasts por sí solos.

Diseño para la accesibilidad primero

Para que los diseñadores sobresalgan en la entrega de entornos de interfaz de usuario verdaderamente inclusivos, deben ser tan buenos en la creación de sitios web para personas con discapacidades como en la creación de interfaces para personas como ellos. Como diseñadores, intentamos ser lo más inclusivos posible, pero es fácil quedar atrapado pensando en hacer que un sitio web sea más fácil de usar para nosotros mismos.

Si puedes ponerte en el lugar de alguien que no es como tú y pensar primero en necesidades poco comunes, es posible que descubras cómo ofrecer una experiencia más sólida y atractiva para cada usuario.

Por ejemplo, en lugar de diseñar un sitio web para alguien con las mismas necesidades visuales tuyas, y luego pensar en hacer ajustes para las personas con daltonismo o problemas de visión, piensa primero en las necesidades de las personas con discapacidades.

Puede obtener más información sobre cómo priorizar las necesidades poco comunes consultando la publicación del blog de Vasilis Van Gemert sobre el «Método de crisis».

Ahora es tu turno

Una última idea: la accesibilidad web es buena para el negocio.

El diseño web inclusivo, o el diseño para la accesibilidad, se trata de maximizar la audiencia potencial que tus clientes pueden ganar. Independientemente de la situación en la que se encuentren los usuarios finales, debes asegurarte de aprovechar el diseño inclusivo.

Si puedes demostrarles a tus clientes que puedes satisfacer las necesidades de todos los clientes, lograrás desbloquear una audiencia mucho más amplia y con muchas más oportunidades.