Cómo añadir texto alternativo (alt text) a una imagen

¿Qué es el texto alternativo?

El texto alternativo (atributo «alt») es un <img> etiqueta y que describe con palabras el contenido de la imagen: <img src="..." alt="...">. Cuando la imagen no se puede cargar (conexión lenta, ruta del archivo incorrecta), se muestra en su lugar en el navegador, los lectores de pantalla lo leen en voz alta a los usuarios con discapacidad visual y permite que los motores de búsqueda comprendan de qué trata la imagen, ya que Google no «ve» la imagen a nivel de píxeles, sino que se basa principalmente en el texto que la rodea y en el atributo «alt».

El texto alternativo tiene una finalidad totalmente distinta a la del nombre de archivo de la imagen (p. ej., IMG_2031.jpg): el nombre de archivo está pensado para el servidor o el sistema de archivos, mientras que el texto alternativo sirve para transmitir significado. No deben confundirse ambos conceptos.

El texto alternativo y el pie de foto que aparece debajo de la imagen tampoco son lo mismo: el pie de foto es un texto visible para todos en la página, mientras que el texto alternativo, en condiciones normales, no se ve y solo se muestra cuando la imagen no se puede cargar o cuando se accede a ella mediante un lector de pantalla. Esta distinción suele confundirse.

Aunque en algunos entornos de desarrollo dejar vacío el atributo «alt» supere la validación HTML, esta validez técnica no significa que el texto alternativo tenga realmente sentido; la herramienta de validación solo comprueba si el atributo existe, no la calidad de su contenido.

¿Por qué es importante?

El texto alternativo es fundamental tanto para la accesibilidad como para el SEO visual. Los usuarios con discapacidad visual, al navegar por la página con un lector de pantalla, obtienen información sobre el contenido de la imagen a través del texto alternativo; si este texto falta, el lector de pantalla suele leer únicamente «imagen» o el nombre del archivo, lo que provoca una pérdida de información. En algunos países, la accesibilidad puede ser incluso una obligación legal.

Por su parte, los motores de búsqueda, al no poder «ver» directamente el contenido de las imágenes, clasifican la página en los resultados de búsqueda de imágenes (Google Imágenes) basándose en el texto alternativo. En las páginas de comercio electrónico, añadir el texto alternativo adecuado a las imágenes de los productos puede aumentar el tráfico adicional procedente de Google Imágenes. La falta de texto alternativo afecta negativamente tanto a la experiencia del usuario como al tráfico de búsqueda de imágenes.

Cuando una imagen tarda en cargarse con una conexión lenta o no se carga en absoluto, el texto alternativo es la única fuente de información que permite al usuario comprender qué debe esperar en ese espacio; esto hace que el texto alternativo sea importante no solo para el SEO, sino también para la accesibilidad general.

¿Cómo solucionarlo?

• Escribe un texto alternativo breve y descriptivo para cada imagen significativa.
• En el caso de las imágenes con fines meramente decorativos (por ejemplo, adornos de fondo) alt="" para que el lector de pantalla se salte la imagen; esto es diferente a no añadir el atributo «alt» en absoluto.
• Utiliza la palabra clave solo si realmente describe la imagen y de forma natural.
• Mantén el texto alternativo breve y claro; evita las frases innecesariamente largas; por lo general, bastan unas pocas palabras.
• En las imágenes de productos, indica el nombre del producto y sus características importantes (como el color, el modelo o el ángulo).
• Si realizas una subida masiva en tu sistema de gestión de contenidos, en lugar de rellenar automáticamente el texto alternativo, créalo a mano en la medida de lo posible o, al menos, utiliza una plantilla significativa basada en el nombre del producto.
• En el caso de imágenes complejas, como infografías o tablas, considera la posibilidad de presentar los detalles que no quepan en el texto alternativo como texto sin formato justo debajo de la imagen.

Ejemplo

<img src="zapatillas-deportivas-rojas.jpg" alt="Zapatillas deportivas rojas para hombre, vista lateral">

Mal ejemplo: <img src="IMG_2031.jpg" alt="imagen"> — ni el nombre del archivo ni el texto alternativo aportan ninguna información sobre el contenido de la imagen. Otro mal ejemplo: alt="zapatillas zapatillas zapatillas deportivas zapatillas baratas zapatillas rebajadas comprar" — en lugar de describir una sola imagen, esto tiene como objetivo rellenar con palabras clave y crea una experiencia sin sentido y aburrida para el usuario de un lector de pantalla.

Errores frecuentes

• Dejar el atributo «alt» completamente en blanco (en imágenes que no sean decorativas).
• Utilizar nombres de archivo sin sentido, como «imagen1.jpg» o «IMG_2023», como texto alternativo.
• Rellenar el texto alternativo con muchas palabras clave seguidas (p. ej., «zapatos, zapatillas deportivas, zapatos baratos, zapatos rebajados»).
• Repetir el mismo texto alternativo genérico en todas las imágenes.
• El informe de Seoraporu.co enumera uno por uno todos los textos alternativos que faltan; en sitios web grandes, esto suele ser un problema que hay que corregir de forma masiva en la plantilla de gestión de productos/imágenes.