Cuando una persona usa un lector de pantalla, lo más probable es que tenga una pérdida de visión parcial o total. Por eso, el texto alternativo en imágenes se vuelve la pieza clave para que ese usuario entienda qué está pasando en pantalla. Aquí te explico cómo usar bien el atributo alt, cuándo dejarlo vacío y qué hacen gigantes como Facebook y Twitter para resolverlo.

¿Cómo leen los lectores de pantalla las imágenes?

Un lector de pantalla siempre comunica dos cosas: el tipo de elemento y su contenido. Si tienes un H1 que dice gatitos durmiendo, leerá título de nivel uno, gatitos durmiendo. Con las imágenes pasa lo mismo, pero el contenido se expresa con texto, y ese texto vive en el atributo alt [01:00].

¿Qué es el atributo alt? Es el texto alternativo que describe una imagen para lectores de pantalla y para casos en que la imagen no carga. Es obligatorio en el HTML, aunque su contenido pueda quedar vacío.

¿Cuándo dejar el alt vacío y cuándo completarlo?

El atributo en sí siempre debe estar, pero no siempre necesita texto adentro. Hay tres escenarios típicos en los que conviene dejarlo como alt="":

• Imágenes decorativas que no aportan al contenido principal, como un gatito ilustrativo.
• Imágenes redundantes, por ejemplo una foto de noticia con el mismo título escrito justo debajo en un H1 o H2.
• Casos donde duplicar la información molestaría al usuario del lector de pantalla.

Dejarlo vacío también es una decisión consciente: estás priorizando qué información merece llegar al usuario y cuál no [02:30].

¿Cómo evitar la redundancia al escribir el alt?

Un error muy común es empezar con imagen de o foto de. El lector de pantalla ya anuncia que es una imagen, así que escribir imagen de gatito hace que se escuche imagen, imagen de gatito. Describe directamente el contenido, sin etiquetas que el lector ya está aportando por su cuenta.

¿Qué pasa con las imágenes funcionales?

Las imágenes funcionales son aquellas que ejecutan una acción: un botón o un enlace. El ejemplo más clásico es el logo del sitio, que casi siempre lleva a la página de inicio [03:50].

Aquí cambia la lógica: al usuario no le interesa si el logo es verde o amarillo, le interesa qué pasa al presionarlo. Entonces el texto alternativo describe la acción, no la imagen. Algo como ir a la página de inicio funciona mucho mejor que logo de la empresa.

¿Qué pasa si olvido poner el atributo alt? El lector de pantalla leerá la URL completa de la imagen en voz alta, letra por letra. Es una experiencia frustrante para el usuario y debe evitarse siempre.

¿Dónde buscar información confiable sobre accesibilidad?

En internet circula mucha información errónea sobre accesibilidad, casi nunca por mala intención sino por desconocimiento. Conviene ir a fuentes serias:

• WebAIM, referente clásico de buenas prácticas de accesibilidad.
• WAI, la Web Accessibility Initiative del consorcio W3C.
• El decision tree de la WAI sobre textos alternativos, que responde caso por caso.

Un dato extra: los textos alternativos también ayudan a usuarios con mala conexión a internet. Si la imagen no carga, el navegador muestra el alt y la persona puede entender qué había ahí [06:30].

¿Qué errores cometen las marcas con el alt y el SEO?

Un caso real: la empresa Manzana quería usar el atributo alt de todas sus imágenes para repetir la palabra manzana y mejorar su posicionamiento orgánico. La idea era forzar el nombre de marca en cada descripción, sin importar el contenido real de la imagen [07:30].

Esto trae dos problemas grandes:

• Trata a los usuarios de lectores de pantalla como usuarios de segunda, dándoles información de menor calidad.
• Hace 15 años se creaban sitios distintos para personas con discapacidad. Hoy esa solución ya no es aceptable, debes entregar el mismo contenido a todos.
• Ignora la performance: muchos usuarios navegan con celulares de baja gama y conexiones lentas, y dependen del alt cuando la imagen no carga.

¿Cómo resuelven Facebook y Twitter el contenido dinámico?

Facebook y Twitter no controlan las imágenes que suben sus usuarios, así que cada uno tomó un camino distinto [09:30].

Facebook compró hace años una empresa de inteligencia artificial para leer imágenes. Por eso muchos de sus textos alternativos empiezan con puede ser una imagen de. La IA acierta la mayoría de las veces, aunque a veces se equivoca y la frase inicial termina siendo repetitiva para el usuario.

Twitter apostó por dejar que el usuario complete el alt manualmente. Hoy cualquier persona puede agregar una descripción al subir una imagen. El problema es la adopción: en el GAAD (Global Accessibility Day), Twitter reveló que solo el 0,06% de las imágenes tienen el texto alternativo completado por el usuario [12:00].

¿Cuál es la mejor estrategia para el alt en contenido generado por usuarios? Combinar inteligencia artificial como respaldo automático con la opción de que el usuario escriba su propia descripción. Así aseguras cobertura amplia y máxima calidad cuando alguien sí se toma el tiempo de completarlo.

Twitter está evaluando dos mejoras: avisar antes de publicar cuando falta el alt, y sumar IA al estilo Facebook para subir el porcentaje de cobertura. La mezcla de IA más opción manual suele ser el camino más sólido cuando no controlas las imágenes que se publican en tu sitio.

¿Tú cómo estás manejando los textos alternativos en tus proyectos? Cuéntame en los comentarios qué decisiones has tomado con imágenes decorativas o funcionales.