¿Cómo hacer una web inclusiva o socialmente responsable?

Diseño web inclusivo o socialmente responsable | Tips y ejemplos prácticos universo meraki

¿Qué te vas a encontrar aquí?

¿Qué significa diseño web inclusivo?

El diseño web inclusivo se basa en dos ideas principales: accesibilidad (o diseño universal) e inclusividad. Un diseño inclusivo es un diseño accesible para todas las personas, independientemente de sus capacidades.

Personalmente, creo que se habla mucho de usabilidad y experiencia de usuario. Y que en general, los diseñadoras tratamos de ordenar la información para hacerla amena y estratégica. Por ejemplo, destacando las llamadas a la acción o los botones para que quien llegue a la web sepa dónde pinchar.

Peeero se nos olvida tener una metodología que garantice que la mayor parte de los usuarios puedan acceder y disfrutar del sitio web.

¿Qué podemos hacer para tener una web más inclusiva?

Texto escalable o de tamaño mayor

Antes metí diseño accesible y universal en el mismo saco pero en realidad no son exactamente lo mismo.

El diseño universal propone una solución de diseño única sin necesidad de adaptaciones con la que todas las personas, independientemente de sus capacidades, puedan acceder a él. Mientras que el diseño accesible se centra en adaptaciones específicas como las pautas de accesibilidad al contenido web (WCAG).

De este modo, hacer el texto escalable según la capacidad de visión del usuario se consideraría diseño accesible. Mientras que hacer el texto de un tamaño único de modo que tanto una persona con visión normativa, como una persona de 80 años pueda leerla sin dificultad, sería diseño universal.

Es importante también para facilitar la lectura:

  • Escoger una fuente fácil de leer
  • Respetar el espacio entre lineas y letras (interletrado e interlineado).
  • Que haya buen contraste entre el fondo y el texto.

Diseño limpio y minimalista

Seguir un orden lógico que nos ayude a comprender la información sin esfuerzo extra.

Para ello, es importante definir ciertas cosas antes de ponernos a diseñar:

  • Tamaño, tipo de letra y color para títulos subtítulos, párrafos…
  • Definir el estilo fotográfico
  • El estilo de ilustración (si lo hay)
  • Las texturas que utilizaremos
  • Cómo se verán los botones (forma, color, qué pasa cuando paso el cursor por encima…)
  • ¿Habrá textos destacados?
  • ¿Movimiento al hacer scroll?
  • ¿Cómo diferenciaremos las secciones?

Tener esto definido de antemano, no sólo nos permite mantener una coherencia visual si no que hace que estaremos repitiendo unos patrones que se le harán familiares y fáciles de comprender a las personas usuarias

Contraste de color

Una herramienta que me gusta mucho para comprobar si el contraste es suficiente para todo tipo de visión es spectrum.

Con un sólo clic podrás comprobar cómo ve tu web una persona con CVD o Déficit de Visión Cromática. Es más, podrás escoger entre diferentes tipos de visión.

Así ve mi web una persona con visión normativa, protanopía (carencia de sensibilidad al rojo) y tritanopía (carencia de sensibilidad al azul)

Así ve mi web una persona con visión normativa.
Así ve mi web una persona con protanopía.
Así vería mi web una persona con tritanopía.

¿Qué puedes hacer para hacer más evidente este contraste?

Pues además de cambiar el color puede ser interesante acompañar el cambio de color con:

  • Aumento del tamaño de lo que queramos destacar.
  • El subrayado: de modo que aunque el usuario no pueda percibir el cambio de color si percibirá esta línea.

Texto alt

Otro de los elementos no visibibles de cara al diseño pero que tiene una gran importancia en el diseño universal.

De hecho, poco se hablaba de la etiqueta alt hasta que google empezó a usarla en su algoritmo.

Si buceas un poco en internet, verás que es una etiqueta de vital importancia para el SEO (Search Engine Optimization, es decir, optimización para motores de búsqueda; o en otras palabras, para aparecer en las primeras posiciones de los buscadores.)

Por eso, muchos expertos en SEO recomiendan aprovechar esta etiqueta para incluir palabras clave por las que deseamos que nos encuentren pero…

¿Sabías que la etiqueta alt es también la que leen los lectores de pantalla?

O lo que aparece cuando por alguna razón la imagen no puede visualizarse. Ya sea por motivos técnicos como que la conexión sea lenta y la imagen tarde en cargar, o porque físicamente no podamos verla porque tengamos alguna deficiencia visual.

Es aquí cuando los lectores de pantalla necesitan el texto alternativo de las imágenes para poder describirlas. De modo que faciliten la comprensión del contenido a las personas que navegan por internet a través de la voz.

¿A que ya nunca más dejarás en blanco esta etiqueta?

HTML semántico

No solo ayuda a tener un esquema claro para los robots buscadores o a tener un código más claro y fácil de mantener.

Si no que ayuda al software de accesibilidad a leer tu web al conocer las etiquetas como: encabezados, párrafos, enlaces, texto importante, enlaces de navegación, formularios o botones.

Enlaces precisos

Porque no es lo mismo enlazar una palabra que una frase que nos ayude a comprender la acción que vamos a realizar.

Por poner un ejemplo práctico podría enlazar mi porfolio de dos formas:

Sí, el enlace es el mismo pero en la segunda opción el usuario sabe exactamente qué acción va a realizar al pinchar ese link. Mientras que en la primera “aquí” puede referirse a múltiples acciones.

Experiencia inclusiva

Una forma sencilla, que poco tiene que ver con la comprensión pero mucho con que todos los colectivos se sientan representados, es en caso de incluir imágenes, tratar que no aparezcan sólo personas normativas.

Dove fue pionera en este tipo de comunicación, aunque por suerte la siguieron muchas marcas después.

Un ejemplo de diseño inclusivo para que te estalle la cabeza y que no viene en ningún manual

Timpers es una marca de zapatillas hechas en España, concretamente en Valencia, con materiales reciclados. En la que el 100% de los trabajadores tienen algún tipo de discapacidad. Quizá los conozcas porque hace algo más de un año les robaron gran parte de su almacén y la noticia se viralizó.

Por suerte, hoy siguen al pie del cañón. Pero de lo que en realidad de quiero hablar es de su comunicación, que como te imaginarás tiene mucho de inclusiva.

Tanto que no sólo garantizan que una vez recibes las zapas, tengas la capacidad de visión que tengas, puedas entender el contenido. Ya que como ves el logo y gran parte de la información están en braille.

Si no que han ido un paso más allá apelando a la empatía. Incluyendo, como puedes ver en este unboxing, una lámina pixelada.

¿Por qué? Pues porque sólo la verás completa si entornas los ojos (flipa en el minuto 2:20). Es su forma de decir que “para ver el mundo claro, no es necesario tener los ojos abiertos”.

Y con esto y un bizcocho, me despido.

Recuerda que puedes completar este artículo con este otro sobre cómo hacer una web sostenible a nivel ambiental.

Que puedo ayudarte a crear tu web estratégica y responsable con el medio ambiente y las personas.

Yyy que si tienes más trucos o enlaces que puedan enriquecer esta info, puedes dejármela en los comentarios porque estoy deseando leerla!

Ey! ¿Te vas?

Descárgate mi guía para marcas conscientes que quieren una identidad coherente que comunique desde una perspectiva ética.

Si te ha gustado este artículo, me la juego a que estos también:

Deja un comentario

Uxía Arias García será responsable por tus datos, se enviarán a Webempresa para poder responder tu comentario. Este tratamiento se hace con base en tu consentimiento. Deberás entender que esta información es pública, y los datos que coloques en este formulario los leerá cualquier visitante de este sitio web. Conservaré esta información por el tiempo que dure esta entrada del blog o que tú decidas eliminar el comentario. Puedes ejercer tus derechos de acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

comunica como piensas, universo meraki

Ey! ¿Te vas?

Descárgate mi guía para marcas conscientes que quieren una identidad coherente que comunique desde una perspectiva ética.