Diseño inclusivo: Cómo hacer que tus visuales sean accesibles para todos

Las infografías son una forma increíblemente eficaz de transmitir rápidamente tu mensaje. Sin embargo, si no tienes en cuenta al usuario al crear tu infografía, puede que tu mensaje no llegue a todo el mundo como podría hacerlo de otra forma.

Hacer que tu infografía sea accesible significa eliminar las limitaciones que podrían impedir uny usuario, con o sin discapacidad, pueda verla. Una mejor accesibilidad significa que más personas pueden ver y compartir tu creación – y los motores de búsqueda lo encontrarán más fácilmente. Todo esto supone una gran «victoria» para ti, pero Y lo mejor de todot: se puede hacer fácil y rápidamente.

Para una lectura relacionada, consulta nuestra guía sobre el equilibrio asimétrico.

Síguenos creando una cuenta gratis y seleccionando una plantilla de la galería infográfica.

Lectores de pantalla son programas que los ciegos y deficientes visuales utilizan para navegar por los sitios web. Los lectores de pantalla traducen el texto a braille o a voz. Excepto… que las imágenes, obviamente, no son texto. Ahí es donde entra en juego el texto alternativo.

Imagen de la izquierda: Los lectores de pantalla no registrarán una imagen a menos que tenga texto alternativo.
Imagen de la derecha: Al utilizar texto alternativo, proporcionas contenido que los lectores de pantalla pueden escanear.

El texto alternativo es un atributo que puedes añadir a cualquier imagen de tu sitio, incluidas las infografías. Los lectores de pantalla (e incluso los motores de búsqueda como Google) pueden leer el texto alternativo para entender lo que muestra la imagen. Si utilizas un framework como Wordpress en tu sitio, añadir texto alternativo es fácil (se muestra a continuación). Sólo asegúrate de utilizar puntos en el texto alternativo. Así es como los lectores de pantalla saben cuándo termina una frase.

Paso 1: En tu panel de control de Wordpress, ve a la Biblioteca Multimedia.

También puede resultarte útil nuestro artículo sobre el diseño del principio de énfasis.

Paso 2: Selecciona cualquier imagen para ver sus opciones.

Paso 3: Añade tu texto alternativo y Wordpress lo guardará automáticamente.

Al crear una infografía con Piktochart, puedes elegir publicar y compartir tu proyecto en lugar de descargarlo como imagen. De este modo, Piktochart mostrará la infografía de forma legible para los lectores de pantalla y los motores de búsqueda. – sin necesidad de texto alternativo. Pruébalo registrándote gratis.

Conviene saber que el texto de Piktochart será legible a través de un lector de pantalla si el visual se comparte electrónicamente a través de HTML. Según la entrada del blog sobre este tema, sólo tendrás que añadir el «texto alternativo» utilizando WordPress, y luego incrustarlo en tu sitio web. Lo que ocurre es que el «texto alt» se añadirá a la infografía en su conjunto, no sólo para cada imagen e icono individual.

Desgraciadamente, en esta fase no podrás añadir etiquetas de «texto alternativo» para imágenes e iconos. Además, los mapas y gráficos de datos no serán accesibles a través de un lector de pantalla.

Si tu infografía tiene mucho contenido, utilizar texto alternativo puede no ser la solución ideal. Además, no todas las personas con discapacidad visual o baja visión utilizan un lector de pantalla. Las personas daltónicas pueden no captar la luz roja y verde – el tipos más comunes de daltonismo – a menudo cambiando el color que realmente ven. Esto hace imposible diseñar una infografía que todo el mundo pueda ver exactamente igual.

En este caso, puedes simplemente escribir lo que dice tu infografía debajo (o encima) de ella. Los lectores de pantalla seguirán pudiendo escanearla, lo que te dará más control sobre el formato del texto. Utilizar un texto alternativo o una versión en texto es beneficioso para todos para ti: las personas con discapacidad tienen acceso a tu imagen, y tú aumentas tus probabilidades de aparecer en una búsqueda.

¿Quieres saber más? Echa un vistazo al diseño de la información.

[clickToTweet tweet=»Use alt text or summarize the content of your visual to make it easily accessible to everyone» quote=»Use alt text or summarize the content of your visual to make it easily accessible to everyone»]

La ceguera no es la única discapacidad visual. Debes considerar también el daltonismo y la baja visión. Tampoco actúes con escepticismo – según la Federación Nacional de Ciegos, hay más de 7,3 millones de personas con discapacidad visual en EE.UU. sólo en EE.UU.y WebAIM calcula que el 93% de los discapacitados visuales utilizan lectores de pantalla.

[clickToTweet tweet=»There are 7.3M people with visual impairments in the US alone. Are your designs accessible to all?» quote=»There are 7.3M people with visual impairments in the US alone. Are your designs accessible to all?»]

Afortunadamente, ser considerado con los discapacitados visuales es fácil de hacer. Sólo es cuestión de hacer que las cosas sean fáciles de leer y destaquen – y en realidad acaba ayudando todo el mundo.

Aquí tienes algunos consejos:

Utiliza un tamaño de letra que no requiera entrecerrar los ojos para leer. Te recomiendo que el tamaño de letra más pequeño sea 14px o «medio». como mínimo. Smashing Magazine, una fuente autorizada dedicada al diseño web, va más allá al sugerir debes utilizar 16px como tamaño de letra para el cuerpo del texto. Si esto hace que tu visual sea demasiado largo, considera la posibilidad de utilizar un lenguaje más conciso, eliminar los puntos menos importantes o reducir el enfoque de tu visual.

También tratamos este tema en nuestro artículo sobre los principios del diseño.

A todos nos gustan los tipos de letra elegantes, pero en general son difíciles de leer como párrafos. Utiliza fuentes básicas para grandes trozos de texto. Fuentes como Georgia, Times, Arial, Helvetica y Calibri son buenas opciones, pero no son ni mucho menos las únicas. Como los encabezamientos suelen utilizar una fuente más grande y son más cortos que los párrafos, tienes más flexibilidad con el estilo de fuente. Sigamos evitando utilizar Webdings sin embargo. Aquí tienes todo lo que necesitas saber sobre la combinación de fuentes para tu visual.

Para fuentes y elementos visuales que transmitan información, utiliza colores que tengan un alto contraste entre sí. No dejes que esto limite tu creatividad, simplemente evita situaciones como poner texto azul sobre un fondo morado. En esta situación, el azul y el amarillo o el naranja serían más apropiados. Si tienes curiosidad por saber lo bien que contrastan tus colores, prueba esto:

Consejo profesional: También puedes desaturar la imagen, que sustituirá el color por tonos de gris. Si no puedes distinguir los grises, entonces los colores originales no tienen un alto contraste.

Evita utilizar grandes bloques de texto blanco sobre un fondo negro (o incluso oscuro). Con el tiempo, cansa la vista de los usuarios y perjudica la legibilidad. Lo ideal sería que tu el texto de los párrafos debe tener un tipo de letra más oscuro sobre un fondo más claro. Si tú debe Utiliza un color claro para el cuerpo del texto, considera un color de valor medio para el fondo, como rojo o azul apagado o gris al 60%, pero ten en cuenta el punto anterior sobre el contraste. Sin embargo, es menos problemático para los títulos. – siempre que los títulos sean bastante cortos.

Los discapacitados visuales no son los únicos usuarios a tener en cuenta cuando se trata de accesibilidad.

Para una lectura relacionada, consulta nuestra guía sobre el diseño de la unidad de principios.

En un mundo en el que Internet rápido está ampliamente disponible, es fácil olvidar que muchos estadounidenses siguen utilizando el servicio telefónico para conectarse a Internet, más de 2 millones de hecho. Sin embargo, hay un grupo aún mayor que experimenta ocasionalmente velocidades de conexión lentas: los usuarios de móviles.

Las imágenes con archivos de gran tamaño tardarán una eternidad en cargarse para las personas con velocidades de conexión lentas. El tamaño del archivo no se refiere a lo grande que parece una imagen; puedes pensar en el tamaño del archivo como en la densidad. Si dos objetos tienen el mismo tamaño, el de mayor densidad pesará más. Puedes reducir el tamaño de archivo de tu imagen sin disminuir su calidad utilizando compresión. El resultado final es una infografía de aspecto fantástico que se carga rápidamente.

Hay varios programas que puedes utilizar que cuentan con herramientas de compresión, pero muchos de ellos, como Photoshop, son servicios o software de pago. Si tu sitio se ejecuta en un framework como Wordpress o Joomla, existen plugins, como Compresión y Optimización de Imágenes Smushque comprimirá las imágenes por ti sin necesidad de utilizar un servicio de pago. Aunque te costará un poco de trabajo.

Piktochart incorpora una función de compresión fácil de usar – De hecho, sólo requiere un clic del ratón. Puedes acceder a las opciones de compresión cuando estés descargando tu proyecto como imagen.

Paso 1:Accede a las opciones de compresión seleccionando «Descargar» en la parte superior derecha del editor de Piktochart.

Paso 2: Elige entre «Original», «Media» y «Alta resolución» para el nivel de compresión que mejor se adapte a tus necesidades.

También puede resultarte útil nuestro artículo sobre la psicología de las formas.

Piktochart ofrece plantillas profesionales para crear presentaciones, infografías, carteles, folletos, informes y mucho más. Sólo con crear una cuenta gratuitaobtienes acceso ilimitado a plantillas, funciones de colaboración, pago por descarga y una carpeta para organizar tus visuales. Empieza ya.

¿Quieres más? Echa un vistazo a la jerarquía visual.