diseño inclusivo web

Jul 1, 2021 | Diseño Web | 0 Comentarios

El Diseño Web Inclusivo

Una parte fundamental del diseño de sitios web de éxito para los clientes es asegurarse de que el mayor número posible de usuarios finales pueda acceder y disfrutar de ese sitio.

¿Qué pasaría si descubriera que alrededor de mil millones de personas no pueden disfrutar de sus diseños? Incluso si esas personas consiguen hacer clic en un enlace y visitar el sitio web que usted crea, puede que no sean capaces de entender lo que se vende o de navegar 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 ello, muchos diseñadores no tienen en cuenta a los clientes con capacidades diferentes a la hora de crear una aplicación o un sitio web atractivos. A menos que tu cliente te diga explícitamente que está apoyando a los clientes con discapacidades, es posible que ni siquiera pienses en esos usuarios.

Aprender a adoptar el concepto de diseño web inclusivo significa ofrecer mejores resultados a tus clientes; cuantos más clientes puedan alcanzar tus clientes, más elogios y críticas positivas recibirán tus diseños.

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

¿Qué es la accesibilidad del sitio web?

En términos generales, la inclusividad se refiere a las actividades o comportamientos que potencian a las personas marginadas de la sociedad. Diseñar para la inclusividad significa hacer que su contenido sea más accesible para cualquier persona que tenga un problema mental o físico que pueda dificultar el uso de un sitio tradicional.

En última instancia, la accesibilidad es uno de los principales objetivos de una estrategia de diseño inclusivo. Al hacer que los sitios web o las aplicaciones sean más accesibles, se ajustan aspectos de la interfaz de usuario y del código para que el sitio sea lo más accesible y utilizable posible para las personas con ciertas limitaciones.

Según la Iniciativa de Accesibilidad a la Web, muchos sitios y herramientas web modernos se diseñan sin tener en cuenta las necesidades de las personas con discapacidad. Esto crea barreras de accesibilidad que hacen que los sitios web sean casi imposibles de usar para algunas personas.

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

  • Problemas cognitivos: Afectan a la comprensión y dificultan la navegación por los sitios;
  • Problemas auditivos: Impedir que los clientes escuchen los vídeos y los contenidos de audio;
  • Problemas neurológicos: dificultando ciertos términos y acciones en su sitio;
  • Problemas físicos: Dificultar el deslizamiento o la pulsación de ciertas herramientas;
  • Problemas del habla: Un problema común con los diseños de interfaz de usuario de voz;
  • Problemas visuales: Impiden una experiencia positiva en sitios muy visuales.

La accesibilidad de la web también puede consistir en facilitar la vida a las personas que tienen problemas en determinadas situaciones. Por ejemplo, las personas con problemas musculares pueden tener más dificultades para utilizar botones y enlaces en una pantalla pequeña.

Entonces, ¿cómo hacer que tus diseños sean más accesibles?

Conoce a tu público

El diseño web inclusivo es mucho más que hacer las fuentes un poco más grandes y esperar lo mejor. Para ofrecer una experiencia verdaderamente accesible, hay que conocer a las personas y grupos a los que se dirige el cliente. Dedicar algo de tiempo a repasar las personas usuarias de tu cliente y hacerles preguntas sobre las personas con discapacidad 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, examinando las partes de su sitio web que podrían ser inaccesibles, y que aprendan de la diversidad.

diseño web inclusivo

Antes de diseñar algo, pregúntese si puede hacerlo:

  • Abordar cualquier necesidad única, como problemas de vista o de oído;
  • Sustituir las soluciones tradicionales por algo más singular. Por ejemplo, en lugar de recurrir a los colores para resaltar una parte del texto, ¿podría utilizar el peso de la fuente? Esto podría ser ideal para alguien con daltonismo;
  • Cree algo que atraiga a clientes con y sin discapacidad.

Diseñar un diseño limpio y claro

El diseño de cualquier sitio web debe centrarse en la claridad.

Tanto si se diseña para la inclusión como si no, el objetivo debe ser ofrecer una experiencia lo más sencilla y directa posible, evitando cualquier pecado de diseño web en el camino.

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

Siempre que cree un nuevo elemento para un sitio web o una aplicación, pregúntese cómo puede facilitar la vida a los clientes de todos los entornos. Por ejemplo, el parque Parramatta utiliza un excelente contraste, fuentes claras y un tamaño ideal de los elementos para garantizar que su sitio web sea lo más fácil posible de usar para los clientes.

diseño inclusivo

Fíjate en que los botones son claros y fáciles de pulsar. Los colores son brillantes y atractivos en cualquier pantalla, y la navegación también es sencilla de seguir. Recuerda que cuando diseñes un prototipo inclusivo:

  • Pruebe las opciones de navegación y asegúrese de que son fáciles de usar;
  • No sobrecargue la pantalla, recuerde que menos es más a la hora de reducir la carga cognitiva;
  • Asegúrese de que su diseño sigue siendo fácil de usar en cualquier pantalla.

Simplificar el lenguaje

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

Utilizar términos sencillos en lugar de la compleja jerga del sector puede suponer una gran diferencia para las personas con problemas de lectura. También hay que pensar en la tipografía, desde el color y el contraste de las palabras con el fondo elegido hasta la claridad de la fuente.

Recuerde que un diseño subóptimo, tanto en las imágenes como en el lenguaje, afecta también a las personas sin discapacidad. Seguir las reglas básicas de simplicidad proporciona una mejor experiencia a todos los que visitan tu sitio.

Asegúrate de que:

  • Subraye, ponga en negrita o cambie el tamaño de los enlaces para lograr un contraste visual;
  • Aplicar un interlineado adecuado, con un tamaño de letra de aproximadamente 1,5 veces;
  • Permitir un espaciado de párrafos coherente;
  • Utilizar un lenguaje sencillo para reducir la carga cognitiva;
  • Describa las abreviaturas cuando las utilice;
  • Utilizar títulos claros para estructurar el contenido de forma lógica;

Fíjese, por ejemplo, en las opciones de diseño del texto del sitio web de Nomensa. El abundante espacio en blanco facilita la lectura del contenido. Las palabras sencillas son comprensibles y atractivas. Incluso la elección del tipo de letra imita el logotipo y ofrece legibilidad.

diseño de páginas web inclusivo

Optimizar los colores del diseño web

Las tendencias de diseño web inclusivo irán y vendrán. Sin embargo, el color y el contraste siempre serán esenciales en sus decisiones.

Si te aseguras de que tus elementos de diseño cumplen con los ratios mínimos de contraste de color definidos por las WCAG, estarás favoreciendo la legibilidad de los usuarios con problemas de visión y mejorando la experiencia de los clientes que no tienen problemas visuales.

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

diseño de sitios web inclusivos

Recuerde que la proporción mínima a la que debe acceder dependerá del elemento que esté diseñando. Las WCAG recomiendan las siguientes directrices:

  • Relación 3:1 para los objetos gráficos (tablas);
  • Proporción de 3:1 para el foco, los estados activos y el hover;
  • proporción de 3:1 para los elementos clicables y los componentes de los formularios.

Mientras trabajas en tus estrategias de contraste de color con aplicaciones como Stark, asegúrate de tener en cuenta también las necesidades de los usuarios con daltonismo. El 4,5% del mundo no ve el color de la misma manera que los demás. Si te resulta difícil conseguir el contraste adecuado sin dejar de cumplir las directrices de la marca de tu cliente, prueba también a subrayar y poner en negrita los elementos.

Considere los elementos de vídeo y audio

Por último, hoy en día son más las empresas que optan por integrar contenidos de vídeo y audio en sus sitios. Estas herramientas visuales y auditivas pueden ofrecer información útil sobre una marca y lo que hace. Sin embargo, algunos clientes podrían tener dificultades para recibir información vital sólo con el vídeo y el audio.

Los subtítulos de los contenidos de vídeo pueden ser esenciales para las personas con pérdida de audición. Es posible que tenga que pensar en añadir transcripciones a los vídeos pregrabados a las que puedan acceder las personas con problemas de audición. Estas transcripciones y subtítulos también son útiles para quienes no tienen acceso al audio en teléfonos inteligentes u ordenadores.

Las transcripciones también pueden ayudar a las personas con deficiencias visuales, ya que proporcionan a la herramienta de texto a voz algo que describir al usuario. De este modo, todos obtienen información útil. Mira este vídeo subtitulado de la Universidad de Washington, por ejemplo. Garantiza que todo el mundo pueda entender lo que ocurre en el contenido. Si añade transcripciones a las páginas de su sitio web para los clientes, también podría ayudarles a beneficiarse de una mejora del SEO. Las transcripciones ofrecen más oportunidades de clasificación de palabras clave que los vídeos y los podcasts por sí solos.

Diseñar primero para la accesibilidad

Para que los diseñadores destaquen en la creación de entornos de interfaz de usuario realmente inclusivos, deben ser tan buenos en la creación de sitios web para personas con discapacidad como en la creación de interfaces para personas como ellos. Como diseñadores, tratamos de ser lo más inclusivos posible, pero es fácil quedar atrapados pensando en hacer un sitio web más fácil de usar para nosotros.

Si puedes ponerte en la piel de alguien que no es como tú y pensar primero en necesidades poco comunes, puede que te des cuenta de que ofreces una experiencia más sólida y atractiva para todos los usuarios.

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

Puedes aprender más sobre cómo dar prioridad a las necesidades no comunes consultando el artículo del blog de Vasilis Van Gemert sobre el “Método de la crisis”.

Accessibility is Good for Business

El diseño web inclusivo, o diseño para la accesibilidad, consiste en maximizar la audiencia potencial que pueden ganar tus clientes. Sea cual sea la situación en la que se encuentren los usuarios finales, debes asegurarte de que aprovechas las ventajas del diseño inclusivo.

Si puedes demostrar a tus clientes que puedes satisfacer las necesidades de todos ellos, podrás conseguir una audiencia mucho mayor y muchas más oportunidades.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Jonás López Mesa

Jonás López Mesa

Especialista en desarrollo web, SEO local y diseño gráfico

Entradas similares

9 Consejos para une mejor diseño de logotipos

¿Se ha preguntado alguna vez por qué nos asombra tanto el movimiento? Una imagen en movimiento tiene más posibilidades de captar la atención que una estática. El movimiento es excitante y llama la atención, y además nos permite acceder a más información en un corto espacio de tiempo.