A estas alturas de la película posiblemente ya sepas qué es un texto alternativo o alt-text. Pero, ¿sabrías hacer uno de calidad, que realmente les aporte significado a los usuarios de lector de pantalla? ¿Sabrías decir qué elementos deben llevar alt-text? ¿Conoces las excepciones?.

En este artículo te voy a enseñar a hacer un buen alt-text para que mejores la experiencia de los usuarios de lector de pantalla, diseñando una interfaz más usable y comprensible.

El alt-text es la manera de traducir la experiencia visual a aquellas personas usuarias que no pueden acceder a ella.

Cuando diseñamos, le damos mucho peso a la comunicación visual, pero también tenemos que pensar en cómo va a ser esa misma experiencia para una persona que no puede percibir los elementos visuales, como pueden ser las personas ciegas.

Los textos alternativos sirven para traducir el contenido visual y que pueda ser leído por los lectores de pantalla, mostrándose como una interfaz sonora a la persona usuaria de esta tecnología.

El texto alternativo va acompañado del atributo alt

“Alt” es un atributo que le asignamos a la etiqueta imagen <img> en HTML y el valor que ingresamos dentro del atributo es lo que conocemos como texto alternativo.

Texto alternativo en el logo de Interaction Design Foundation

Pero el texto alternativo, también nos ayuda cuando no ha sido posible cargar una imagen por un problema de conexión. En este caso el texto se muestra en pantalla, de manera que cualquier usuario puede acceder a la descripción de la imagen, sin perderse información.

Alt= “Ejemplo de una pintura de la Sagrada Familia, cuando la imagen se ha cargado correctamente, cuando no y cuando no y lleva texto alternativo" — *Función del alt-text cuando no se ha podido cargar una imagen*

No olvides que el texto alternativo es muy importante para SEO, Google tampoco puede acceder al contenido visual si no le damos una alternativa textual.

¿Qué tipo de texto alternativo necesita mi imagen?

Lo primero antes de pensar en cuál va a ser el texto alternativo, es saber qué función cumple la imagen que vas a utilizar.

Imágenes decorativas

No todas las imágenes necesitan texto alternativo

Las imágenes que cumplen una mera función decorativa no necesitan texto alternativo. También puede ser el caso de una imagen que acompaña a un texto que significa lo mismo, por lo que ponerle un texto alternativo resultaría redundante.

Pero, ojo, sí necesitan el atributo alt, que en este caso irá vacío. Agregar este atributo, pero dejarlo vacío (solo con las comillas), le dice a las tecnologías asistivas que deben ignorar este elemento, ofreciendo una interfaz más limpia para las personas usuarias no visuales.

Alt= "Tres ejemplos de alt text: Texto alternativo de imagen decorativa: Alt="". Texto alternativo de imagen informativa: Alt="Introduce la tarjeta sim en la ranura de tu dispositivo". Texto alternativo de imagen funcional: Alt="Añadir a favoritos" — *Ejemplo de textos alternativos para imágenes decorativas, informativas y funcionales*

Si no añadimos este atributo, la tecnología asistiva siempre va a intentar obtener información de esa imagen, rescatando el nombre que le hayamos puesto al archivo. Imagina que lo has nombrado como “img_492j29k0w913d”, es una locura para la persona que lo tiene que escuchar a través de su lector de pantalla. También puede mencionar que es una imagen y nada más, esto genera gran confusión para el usuario porque le va a indicar que hay algo, pero sin decirle el qué y si es importante o no.

Alt= “Chica recostada en un sillón al lado del texto “Rebajas tan grandes como tus sueños: tienes cursos desde solo 9,99€ hasta el 31 de agosto. Oportunidades así sólo ocurren una vez en la temporada” — *Ejemplo de una imagen decorativa en un banner de Udemy*

Imágenes informativas

Son aquellas imágenes que contienen información necesaria o útil para que el usuario entienda la experiencia completa, bien porque aportan contexto, bien porque contienen datos importantes. Toda la información que no sea esencial en la imagen, la omitiremos de la descripción.

Alt= “Texto alternativo: Mesita auxiliar azul con una balda al lado de un sofá. También aparecen un vaso de leche, un mando y varios libros apilados que no se considera relevante añadir a la descripción.” — *Ejemplo de texto alternativo de un producto de Ikea*

¿Y si mi imagen contiene texto?

Cuando tenemos imágenes con texto, estas pueden ser de dos tipos:

Imágenes con texto incrustado: No es una buena práctica utilizar este tipo de imágenes porque si el texto está embebido en la imagen, los lectores no pueden acceder a él. En estos casos, el texto alternativo será el mismo que el texto que aparece en la imagen, junto con aquellos otros elementos que sean esenciales.

Alt= “Los textos “cupon descuento bienvenida, código promocional: BIENVENIDA10 y 10% descuento en tu primer pedido” se consideran información esencial para el texo alternativo y la línea discontinua de recorte del cupón no es esencial” — *Imagen de texto de un cupón descuento*

Imágenes con texto plano: En estos casos no se necesita un texto alternativo porque los lectores pueden acceder a él, y el atributo alt se puede dejar vacío, a no ser que la imagen contenga elementos visuales que sean esenciales.

Imágenes funcionales

Las imágenes interactivas que llevan asociadas una funcionalidad, como por ejemplo, los logos que conducen a la página de inicio, los iconos o imágenes dentro de un botón o imágenes que cumplen la función de link, tienen que tener un texto alternativo y este no debe describir la imagen, sino la función que conlleva (por ejemplo: ampliar/contraer menú).

Alt= “Fragmento de post de Instagram, donde los iconos de gustar, comentar, compartir y guardar deben ser descritos por su acción y no por su apariencia visual: corazón, globo, flecha, marcapáginas." — *Etiquetas de texto alternativo en iconos*

Utiliza verbos que describan la acción que se ejecutará al activarlos: enviar, aceptar, compartir, etc. en lugar de por lo que representan (corazoncito, lupa, etc.). Si tenemos, por ejemplo, un icono que se intercambia con otro para representar dos acciones, como un icono de guardar que se rellena cuando el elemento se ha guardado, deberíamos describir lo que ocurre: guardar/guardado - quitar de elementos guardados.

Algunos tips para escribir texto alternativo

Ahora que ya sabes diferenciar los tipos de imágenes, ya solo me queda darte algunos consejos a la hora de redactar el texto alternativo.

Deja atrás tu sesgo visual:

No es necesario describir todo lo que aparece en la imagen, no se trata de recrear una experiencia visual, sino de crear una experiencia auditiva, por lo que menciona únicamente las cosas relevantes de esa imagen en este contexto. No es lo mismo estar comprando una camiseta o un mueble de Ikea, donde quizás sí te importe saber el color, sin embargo, describir los colores de las camisetas que lleva un grupo de personas en una fotografía sobre un evento realizado en la oficina, sería innecesario.

No seas redundante:

Si vas a repetir lo mismo que ya está en el texto y no vas a aportar información diferente, mejor no pongas nada (Alt= “”). No empieces la descripción por “imagen de…”, las tecnologías de apoyo ya le indican a usuario el tipo de estructura en la que se encuentran, por lo que se estaría repitiendo dos veces la palabra “imagen”.

Deja la subjetividad de lado:

Si yo te digo que en una imagen hay un coche que está mal estacionado, tú puedes imaginar que ese coche está subido a una acera, en una plaza de prohibido aparcar, o incluso en medio de la calle. Sin embargo, si te digo que hay un coche estacionado junto a una señal de prohibido aparcar, tu imaginación se acercará mucho más a la realidad de la imagen. Intenta evitar opiniones subjetivas y calificativos como bien, mal, bonito, feo… Y limítate a lo informativo.

Si te vas a extender, mejor aparte:

Si la imagen requiere una descripción larga (más de 125 caracteres) porque es compleja como una tabla, un gráfico o contiene mucha información. Lo mejor es añadir la descripción aparte (por ejemplo, mediante un atributo longdesc o un enlace junto a la imagen), y en el texto alternativo únicamente poner una descripción corta que dé una idea del contenido, para que el usuario decida si quiere ampliar la información.

Este texto fue escrito por Lorena Ramos, Head of Digital Accessibility en Hi Experience, en agosto de 2023.

Este artículo pertenece a los Insights de Accesibilidad, una iniciativa liderada por nuestra experta Lorena Ramos en la que compartimos de forma mensual piezas de conocimiento para acercaros a la Accesibilidad Digital de forma fácil y práctica.

¿Sabes escribir un buen Alt-Text?