Tipos de imágenes y cómo hacerlas accesibles

Informar a los usuarios es uno de los objetivos más importantes de un sitio web. Queremos que nuestra audiencia se quede con los mensajes principales que queremos transmitirles cuando ingresan a nuestro sitio. Sin embargo, ¿qué ocurre cuando esos usuarios tienen problemas de visión, u otros problemas que no les permiten comprender correctamente las imágenes? ¿Qué elementos hacen que una imagen sea accesible o no?

Tipos de imágenes

Se podría pensar que basta con agregar un texto en el campo "alt" y listo, la imagen es ahora accesible. Pero es un poco más complejo que eso. Primero, debemos pensar cuál es el propósito que tiene una imagen que está puesta en nuestro sitio web. ¿Busca entregarle información al usuario? ¿Es decorativa? ¿Es un enlace? ¿Busca generar una emoción en el usuario?

Hay varias preguntas que te pueden ayudar a explicar mejor el significado de la imagen a un usuario que esté usando tecnologías de asistencia, como un lector de pantallas.

Imágenes decorativas

Si tu imagen es decorativa, significa que el contenido es comprensible aun si la imagen no está disponible. En estos casos, la imagen debe ser ocultada en el código, enviando una señal a los lectores de pantalla para que ignoren este contenido, ya que no es necesaria para entender el mensaje.

Esto se puede hacer de varias maneras, por ejemplo dejando vacío el campo de texto alternativo o implementando la imagen como fondo CSS.

Imágenes informativas

Si decides que la imagen es informativa, hay que considerar varios elementos. Lo más básico es agregar un texto alternativo con una descripción (alt="[descripción]"). Pero es importante que esta descripción sea significativa, es decir, que transmita el mensaje completo.

En algunos casos es posible entregar información adicional. Por ejemplo, una imagen informativa puede ser un logo en el menú de una página, que entrega información (dice en qué sitio estás) y funciona como enlace para ir a la página de inicio. En este caso, se puede agregar el texto alternativo del logo (nombre de la empresa) y más información en el título del enlace (Volver al inicio).

El lector de pantalla debiera leer ambos contenidos, entregando más detalle al usuario. Es recomendable utilizar textos cortos en el campo "alt", ya que el usuario va a tener que escuchar todo lo que está escrito ahí.

Otros elementos a considerar

Más allá de los textos "alt", hay que considerar algunos elementos adicionales de las imágenes, como los colores y contraste, uso de tipografías, iconos, etc. Estos elementos pueden afectar a personas con visión reducida o alterada.

Color y contraste

Sin buenos niveles de contraste de color en elementos como palabras e iconos, estos pueden resultar difíciles de discernir e incluso no ser visibles para algunas personas que tengan problemas de sensibilidad al color. Es conveniente utilizar herramientas para probar los niveles de contraste en este tipo de imágenes. ChromeLens es una extensión de Google Chrome que entrega varias herramientas que permiten testear para diferentes alteraciones de la visión. También es importante que la selección de colores y contraste estén de acuerdo a las guías de la WCAG.

Uno de los elementos que hay que recordar es no utilizar únicamente el color para entregar información, sino que combinarlo con otros elementos como tamaño, forma, subrayado, ubicación, etc.

Tipografía

En un mundo ideal de accesibilidad, el texto y las imágenes se mantendrían separados, lo que permitiría a los usuarios manipular la tipografía para facilitar la lectura de ser necesario (agrandando la letra, el espaciado, etc). Sin embargo en el mundo real muchas veces tenemos imágenes que incluyen texto. Algunos puntos a tomar en cuenta en estos casos son:

• Limitar el número de fuentes utilizadas y variaciones sobre estas (como cursiva, negrita, mayúsculas y otros estilos).
• Preferir fuentes que tengan letras claramente definidas y diferenciables entre sí (por ejemplo, que la B y el número 8 no se parezcan, que no haya confusión entre las letras "b", "d", "q" y "p", etc).
• Evitar el texo justificado para no provocar "ríos de espacios" en el contenido, y permitir un buen espaciado entre líneas y párrafos.

Iconos e indicaciones

El uso de iconos puede apoyar los mensajes, utilizando símbolos para facilitar la comprensión de algunos elementos. Estos son algunos elementos a considerar al utilizarlos, como también cuando se entregan indicaciones:

• Se claro y conciso: Las instrucciones deben ser fáciles de entender, con lenguaje simple, evitando términos técnicos, palabras complicadas, abreviaciones y acrónimos.
• Usa iconos, gráficos y símbolos para sumplementar el texto cuando sea posible. Las imágenes pueden facilitar la comprensión del mensaje. Asegúrate de que los iconos escogidos sean comunes y fáciles de entender.