Diseñar para los discapacitados visuales

Para aquellos de nosotros que no somos uno de los 3.84 millones de españoles con una discapacidad visual, no podemos pensar en cómo el diseño gráfico afecta a las personas con ciertas discapacidades.

La forma en que se diseña un sitio web, un folleto o una infografía afecta la accesibilidad y la experiencia del usuario (UX, o UI – User Interface) de manera diferente para cada uno de nosotros.

En MAGENTA IG garantizamos que todos nuestros diseños gráficos, diseños web, videos y animaciones (todos los productos que creemos) cumplen con los requisitos técnicos, funcionales y de soporte para cumplir legalmente.

El diseño de infografías, gráficos web y mercadotecnia o material de ventas para personas con discapacidades visuales en mente es pertinente para una audiencia más amplia que los diseñadores altamente inclusivos.

Construir contenido para que sea accesible para personas con discapacidades visuales también fortalece al usuario Experiencia para el resto de tu audiencia.

La legibilidad, los elementos de contraste, el uso del color, el simbolismo fuerte y las alternativas de texto / voz hacen que los diseños sean más impactantes.

diseños visuales para ciegos

Tipos de pagos visuales

Comprender los diferentes tipos de discapacidades visuales y cómo pueden afectar la experiencia de un usuario es un buen lugar para comenzar al diseñar productos.

Puede ser difícil imaginar cómo se ven los elementos de diseño gráfico a través de ojos que no son los tuyos.

Afortunadamente, existen herramientas en línea que reproducen las discapacidades visuales, que proporcionan información para el diseño de soluciones para problemas de accesibilidad.

A continuación hay descripciones y ejemplos de algunos tipos de deficiencias visuales. Para cada discapacidad visual, mostramos el logotipo familiar de Google para ilustrar cómo las personas con una discapacidad en particular podrían verlo.

ver todo a través de los ojos de otros

Daltonismo

La ceguera al color es la capacidad disminuida para ver colores particulares o discernir las diferencias entre ellos. Afecta al 8% de la población masculina y al 0,5% de la población femenina.

Hay varios tipos de ceguera al color, pero la mayoría de las personas con ceguera al color tienen problemas para distinguir los rojos de los verdes.

Aunque es raro, algunas personas tienen ceguera total al color, lo que significa que no ven ningún color en absoluto.

Visión normal

visión normal

Deuteranomalía – sensibilidad reducida a la luz verde

sensibilidad reducida a la luz verde

Protanopia – Ceguera roja

Ceguera roja

Tritanopia – Ceguera azul

Ceguera azul

Baja agudeza

La agudeza visual describe la claridad o la nitidez por la que una persona ve.

Existen múltiples causas para la baja agudeza que varían de causas ópticas, como él astigmatismo, a causas neuronales, como un daño cerebral.

Visión de baja agudeza

Visión de baja agudeza

Nublado / Obstruido

Esto incluye una variedad de discapacidades visuales que incluyen degeneración macular, glaucoma, flotadores y cataratas.

Glaucoma – Nervio óptico dañado

Nervio óptico dañado

Degeneración muscular – Pérdida en el campo de visión central

Pérdida en el campo de visión central

 

Ceguera completa

Las personas con ceguera total no pueden ver nada, y no ven la luz.

Esto es diferente de ser “legalmente ciego”, una distinción en España definida por tener una agudeza visual de 20/200 o menos en su mejor ojo con la mejor corrección posible.

Puede parecer imposible diseñar para personas que son completamente ciegas o muy cercanas a él, pero este no es el caso de las tecnologías actuales.

La gente usa lectores de pantalla para navegar por Internet a través del sonido en lugar de la vista.

Los lectores de pantalla convierten el texto en “voz sintetizada”, lo que permite al usuario escuchar el contenido de forma alternativa.

braile

Legibilidad

Los diseños que son claros y consumibles son el vehículo para entregar un gran contenido. Diseñar para personas con discapacidades visuales lo desafía a crear diseños con aún más claridad.

Un diseño claro comienza con las selecciones tipográficas apropiadas. Un tipo de letra sans-serif limpio (lo que significa que no hay características extendidas en las letras) como Arial, Verdana o Helvetica ayuda a aumentar la legibilidad de su contenido.

El texto muy estilizado, como un tipo de letra cursiva o una fuente en cursiva, hará que sea más difícil diferenciar los caracteres individuales.

Al hacer espacio en y alrededor de las palabras, se vuelven más distinguibles y agradables de leer. Algunos ajustes visuales al espaciado del texto que aumentan la legibilidad incluyen:

  • Seguimiento (el espacio entre las palabras)
  • Kerning (el espacio entre letras individuales)
  • Líder (el espacio entre líneas de texto)
  • Ancho de línea (más legible en 30-40 caracteres)

Es importante realizar los ajustes que mejor se adapten al contenido y al público. No hay configuraciones exactas que funcionen en cada situación.

La cantidad de espacio necesario necesaria dependerá del contexto, el formato y el tamaño del contenido.

Sin embargo, hay algunas pautas generales que se deben seguir al diseñar el tipo para personas con discapacidad visual:

  • Utilice tamaños de letra más grandes.
  • Sin cursiva
  • Negrita cuando sea posible
  • Utilice fondos simples.
  • Evita el texto gris y los fondos.
  • Evite agregar un efecto de sombra al texto ya que cambia la forma de las letras.

personas invidentes

Elementos contrastantes

Una de las mejores maneras de mejorar la accesibilidad de su diseño es usar un contraste intenso. El contraste se puede aplicar a una variedad de elementos de diseño, incluidos el color, el tamaño y la forma.

Para asegurarse de que haya suficiente distinción entre los componentes visuales, existen algunas técnicas para ayudarlo. Un método que recomiendo es verificar la accesibilidad de sus opciones de color.

Existen herramientas para este propósito, como la que Google construyó para su sitio de Diseño de materiales.

Esta herramienta determina la legibilidad del texto en diferentes colores y tamaños junto con su
elección de color de fondo.

Este es un excelente punto de partida para jugar con ideas de colores iniciales. También es una excelente manera de probar los colores que ya ha elegido.

Otras técnicas para asegurar un contraste suficiente incluyen:

  • Retrocede y entrecierra los ojos ante tu diseño. ¿Puedes leerlo / entenderlo?
  • Cambia la imagen a escala de grises. ¿Se destacan los elementos individuales?
  • Use líneas mas gruesas y gruesas. Las líneas que son demasiado delgadas pueden no verse en absoluto.

No confíe en el color para comunicar

Es común que los diseñadores se apoyen en el color para indicar el significado. El rojo se usa especialmente como una muleta para decir: “Esto está mal”.

Desafortunadamente, las personas que tienen problemas para discernir los rojos pueden perder el mensaje por completo.

Es mucho mejor mostrar una idea: canta una combinación de simbolismo, texto y color. De esta manera, el mensaje se entrega lo más fuertemente posible a la mayor cantidad de personas.

De la misma manera, las tablas y gráficos que se basan en el color para grupos separados pueden ser difíciles de “leer” para las personas con discapacidades visuales, especialmente aquellas con ceguera al color.

Al incluir texturas y patrones de contraste, agrega otra capa de legibilidad. Un diseño fuerte transmite el mismo significado en monocromo.

Piense en el color utilizado en un diseño accesible como una capa de pintura en una casa. La estructura y el propósito de la casa es él mismo con o sin la pintura.

pantallas táctiles

Lectores de pantalla y texto alternativo

Para asegurarse de que una persona que usa un lector de pantalla pueda acceder a su contenido de manera eficiente, tome las siguientes medidas:

  1. Utilice un diseño simple, de una sola columna.
  2. Cualquier información que se recopile de imágenes, objetos, scripts, CSS, etc. debería estar disponible a través de un texto alternativo. El texto alternativo es una descripción insertada como un atributo en una imagen usando HTML. Un lector de pantalla lee el texto alternativo en lugar de la imagen. El texto alternativo es visible para todos los usuarios si una imagen no se carga.
  3. El texto alternativo fuerte es descriptivo y se basa en el contexto. No es necesario incluir información redundante qué se puede recopilar del texto que rodea una imagen. Mantenga la descripción concisa y ponga la información importante primero.
  4. El contenido de una página solo debe cambiar si un elemento es activado por el usuario.
  5. Los enlaces y botones accesibles son descriptivos, no solo el texto que dice “HAGA CLIC AQUÍ”. Explica qué es el enlace y hacia dónde se dirige.

Si estos pasos no son plausibles de tomar en su diseño, la siguiente mejor solución es crear páginas separadas que sean accesibles para personas con discapacidades visuales.

Una valiosa adición a estas páginas es la capacidad del usuario para cambiar el tamaño y el color de la fuente.

Conclusión

Es mejor mantener su diseño lo más minimalista posible. Utilice un diseño lineal y organizado con una jerarquía sólida que esté informada por el contenido.

Evite el texto llamativo o animado y los fondos que reducen la legibilidad. Seleccione una paleta de colores pequeña y pensativa que, ofrezca un buen contraste.

Piense en lo que está tratando de decir y lo que debe incluirse para transmitir ese punto. La edición cuidadosa y el aprovechamiento de sus diseños para promover una mayor accesibilidad los hará mas útiles para todos.

#SeguimosEnLínea

Por |2018-10-27T13:09:32+00:0021 noviembre , 2018|Branding|

Deje su comentario

LinkedIn
Facebook
Twitter
Google+
Pinterest
Whatsapp
RSS
Follow by Email