Diseño inclusivo: para ir más allá de oír o de ver

¿Te has planteado si tu diseño web es accesible para todos?

El diseño debe tener siempre una parte funcional y otra emocional. La parte emocional siempre debe estar presente, para que el usuario se sienta identificado y conecte con tu marca, producto, etc. Pero sin un diseño inclusivo, te será imposible hacer llegar tu mensaje a las personas con discapacidades visuales, auditivas o de otro tipo.

Hacer que tu página web sea inclusiva significa, sencillamente, diseñar para todos. No solo es una opción más ética, sino que además consigue incrementar el alcance de tu marca. Para que lo consigas, vamos a ver los principios del diseño inclusivo para personas con discapacidades auditivas y visuales.

Diseño inclusivo para personas con discapacidad auditiva

Las páginas web son un medio fundamentalmente visual, por lo que podríamos pensar que no suponen un problema para las personas con discapacidades auditivas. Sin embargo, hay varios hándicaps en los que las personas sin discapacidad no reparan a primera vista.

Marie van Driessche es una diseñadora holandesa basada en Ámsterdam especializada en diseño inclusivo para personas con discapacidad auditiva, como ella misma. Le fascina la forma en que las personas interactúan con los productos digitales, entre ellos las páginas web. Vamos a ver los principales obstáculos del diseño web inclusivo y sus recomendaciones para superarlos.

El idioma como segunda lengua

Para muchas personas sordas, el idioma escrito es su segunda lengua: la primera es el lenguaje de señas. Esto les puede generar algunas dificultades para comprender la información presentada en una página web. Por ejemplo, les cuesta entender los sinónimos, los juegos de palabras y las metáforas, ya que la lengua de señas no los incluye.

Para facilitar la comprensión, van Driessche recomienda seguir estas pautas:

Usar encabezados y subtítulos, para destacar fácilmente la información más relevante.

• Separar la información por puntos, esto es, presentarla en forma de listas con viñetas.
• Escribir con un estilo periodístico, presentando una idea principal en cada párrafo y explicándola a continuación.
• Utilizar frases cortas (de 7 a 10 palabras por línea).
• Intentar traducir el contenido de manera visual, por ejemplo, mediante gráficos, diagramas o imágenes. Los vídeos también son una buena opción, pero hay que tener en cuenta las recomendaciones de accesibilidad que explicaremos en el siguiente apartado.
• Usar un lenguaje accesible y claro, para evitar incrementar la carga cognitiva del usuario.
• Es importante incluir un glosario con el vocabulario especializado de tu web, donde se definan los términos usando un lenguaje simple.
• Usar espacios en blanco para facilitar la lectura.

El uso de vídeos

Los vídeos son un método fantástico para transmitir información de manera visual. Pero en muchos casos la narración se apoya en la voz hablada, lo que crea dificultades de accesibilidad para las personas con discapacidad auditiva. ¿Cómo podemos resolverlo?

La opción ideal sería contar con los vídeos "doblados" al lenguaje de señas. Al empezar a reproducir el vídeo, se muestra un icono para hacer saber que la información está disponible en este idioma, y así el usuario puede elegir cuál ver.

Pero debido a restricciones de presupuesto y disponibilidad de intérpretes, esta no es una opción para todas las empresas.

La alternativa más sencilla en la mayoría de los casos es subtitular el vídeo. Hay que tener en cuenta una serie de pautas de subtitulado para facilitar la comprensión, como por ejemplo, respetar un tiempo mínimo en pantalla y un número máximo de caracteres por línea. El texto de los subtítulos debe reflejar el contenido del mensaje hablado, pero no tiene por qué ser una traducción literal; en muchos casos, es más recomendable condensar la información.

Por último, también está la opción de poner una transcripción del vídeo a disposición de los usuarios. Las transcripciones automáticas pueden ser un buen paso inicial, pero a menudo contienen errores y pueden ser difíciles de leer, por lo que es necesario que las revise un profesional.

Las opciones de contacto

En muchos casos, el medio de contacto con la empresa es un teléfono, lo que obviamente genera problemas para las personas con discapacidad auditiva. Marie von Driessche cuenta en sus charlas que, a día de hoy, necesita pedir ayuda a su madre para poder solicitar una cita con su médico, ya que este trámite solo puede hacerse por teléfono.

Por suerte, aunque esté tan extendido, resolver este problema es muy sencillo: solo tenemos que incluir opciones de contacto alternativas como un email o un chat de Whatsapp. También hay que tener en cuenta que los vídeos de ayuda al usuario sean accesibles.

Diseño inclusivo para personas con discapacidades visuales

En España hay cerca de 1 millón de personas con una discapacidad visual, según DMAE, pero no todos tienen las mismas circunstancias ni necesitan las mismas adaptaciones. Por tanto, lo primero es entender cuáles son los principales tipos de discapacidad visual existentes:

• Daltonismo. Las personas con daltonismo o "ceguera al color" tienen menor capacidad para ver algunos colores, o para distinguir las diferencias entre ellos. Los tonos rojos y verdes son los que suelen dar más problemas. En algunos casos más raros, la ceguera al color es absoluta.
• Baja agudeza visual. Las personas con baja agudeza visual perciben las formas de manera menos nítida. Existen múltiples causas para este problema, como el astigmatismo o el daño cerebral.
• Visión nublada u obstruida. Generalmente, este problema se asocia a una pérdida en el campo de visión debida a patologías como la degeneración macular, el glaucoma, los flotadores o las cataratas.
• Ceguera completa. Las personas con ceguera completa no pueden ver nada, ni siquiera la luz. Esta discapacidad es la que requiere mayores adaptaciones en el diseño web, pero es posible solucionarlo gracias a adaptaciones como los lectores de pantalla.

Cómo mejorar la legibilidad de tu diseño web: recomendaciones generales

1. Apuesta por un diseño claro y limpio.
2. Escoge tipografías sans-serif, como la arial, la verdana o la helvética. Al tener un diseño de letra más sencillo, son más fáciles de leer.
3. No uses tipos de letra en cursiva, ya que hace más difícil distinguir los caracteres individuales y por tanto dificulta la lectura.
4. Utiliza espacios más amplios entre letras y palabras para facilitar la lectura. Esto se aplica a diferentes ajustes, como el seguimiento (espacio entre palabras), el líder (espacio entre líneas de texto), el kerning (espacio entre letras individuales) o el ancho de línea.
5. Incrementa el tamaño de la letra. Aunque la medida concreta dependerá de la web, en general se recomienda que haya entre 30 y 40 caracteres por línea.
6. Utiliza la negrita cuando sea posible.
7. Usa un diseño de fondo simple, para no "ensuciar" el contenido.
8. Evita el texto gris, ya que no contrasta lo suficiente. En su lugar, busca contrastes marcados de color, tamaño y forma.
9. No uses efectos de sombra en el texto, ya que lo distorsionan.
10. Usa líneas gruesas, ya que se ven con mayor claridad que las finas.

Para hacernos una idea rápida de la legilibilidad de nuestra web, se recomienda echarle un vistazo al diseño con los ojos entrecerrados: si se puede leer y entender, habremos conseguido un diseño más inclusivo.

Diseño inclusivo para personas con daltonismo

Un hándicap en el que podemos no reparar fácilmente es que estamos muy acostumbrados a comunicar con colores. Por ejemplo, el rojo se usa a modo de advertencia y el verde para dar a entender que algo está bien. Pero estos son precisamente los tonos más difíciles de distinguir para la mayoría de personas con daltonismo, así que nuestro mensaje podría perderse por completo.

Para fomentar el diseño inclusivo, es mejor acostumbrarse a usar una variedad de recursos, como los símbolos, los textos o las texturas. Al acabar de diseñar una página de nuestra web, es una buena práctica pasarla a escala de grises para comprobar cómo afecta eso a la legibilidad.

Diseño web para lectores de pantalla

Los lectores de pantalla son un dispositivo que permite el acceso a la web incluso a las personas completamente ciegas o con visibilidad muy limitada. Para ofrecer una buena experiencia en estos casos, hay que tener en cuenta las siguientes recomendaciones:

• Usar un diseño simple, de una sola columna, lo que también va en línea con las pautas generales para mejorar la legibilidad.
• Todos los contenidos como imágenes, objetos, scripts, o CSS deberían contar con un texto alternativo. El texto alternativo es un elemento de HTML que sirve una doble función: todos los usuarios pueden verlo si un elemento no se carga, pero además los lectores de pantalla lo reproducen para que el usuario sepa lo que está ahí. Por tanto, estos textos deben ser sencillos y descriptivos, sin elementos redundantes que puedan deducirse del texto principal de la página.
• En un diseño inclusivo, los enlaces y los botones son descriptivos (nada de "haz clic aquí"). De esta forma, los usuarios que emplean lectores de pantalla pueden saber qué es el enlace y hacia dónde se dirige.