¿Qué es el texto alternativo (atributo alt) de una imagen?

En el panel de tu tienda aparece como un campo pequeño junto a cada foto, «Añadir texto alternativo», y en las auditorías como «imágenes sin alt». Mucha gente lo llama «etiqueta alt», pero no es una etiqueta: es un atributo de la etiqueta img, el texto que ocupa el sitio de la imagen cuando la imagen no se ve. A una tienda le importa por dos lectores a la vez: la persona que compra con un lector de pantalla y el buscador que intenta entender qué hay en la foto.

Cómo funciona

La especificación de HTML lo define como el texto que actúa como alternativa a la imagen, para quien no puede verla. La regla práctica que propone es una pregunta: si quitaras la imagen, ¿qué texto pondrías en su lugar? De ahí salen los casos:⁠^{[1]WHATWG. HTML Living Standard: requirements for providing text to act as an alternative for images}

• Imagen que aporta información: el texto dice lo que aporta, no lo que es el archivo.
• Imagen decorativa, que no añade nada: el atributo va vacío, alt="". Vacío no es lo mismo que ausente: el vacío le dice a la máquina que puede ignorarla.
• Imagen que es el único contenido de un enlace o de un botón: el texto describe adónde lleva o qué hace, no el dibujo.
• Imagen con un pie de foto al lado: el texto alternativo no repite el pie.

Las pautas de accesibilidad del W3C (WCAG 2.2) lo convierten en un requisito de nivel A, el más básico: todo contenido no textual que se presenta al usuario tiene una alternativa en texto que cumple la misma función, y lo puramente decorativo se marca de forma que las tecnologías de apoyo lo puedan ignorar.⁠^{[2]W3C, Web Accessibility Initiative. Understanding Success Criterion 1.1.1: Non-text Content (WCAG 2.2)}

Lo que hace Google con él

Google explica que usa el texto alternativo, junto con algoritmos de visión artificial y el contenido de la página, para entender de qué trata una imagen. Si la imagen es un enlace, el texto alternativo hace de texto del enlace. Lo que pide es un texto útil, rico en información, que use las palabras clave con naturalidad y en el contexto de la página.⁠^{[3]Google Search Central. Google image SEO best practices} Su ejemplo, con la foto de un cachorro, va de peor a mejor: sin atributo; con una ristra de palabras como «cachorro perro cría perrito cachorros»; con «cachorro»; y, lo mejor, «cachorro de dálmata jugando a buscar la pelota». Sobre la ristra avisa de que da una mala experiencia y puede hacer que vea tu sitio como spam.⁠^{[3]Google Search Central. Google image SEO best practices}

Hay una segunda regla de Google que afecta a las tiendas que generan textos en masa. Su guía sobre el contenido hecho con IA pide revisar a mano todo lo generado antes de publicarlo, y extiende esa revisión a los metadatos, incluido el texto alternativo de las imágenes, porque pueden aparecer en los resultados de búsqueda.⁠^{[4]Google Search Central. Google Search's guidance on using generative AI content on your website} Un modelo que describe mal una foto produce una alucinación igual que si se equivocara en la descripción de producto.

En una tienda

Un ejemplo ficticio: la ficha de producto de una mochila para cámara, con cuatro imágenes.

En el código, la diferencia entre las dos últimas filas es esta:

<img src="medidas-mochila.png" alt="Medidas exteriores: 30 × 18 × 46 cm, peso 1,4 kg" />

<img src="separador.svg" alt="" />

En Shopify, el texto alternativo de cada imagen de producto se escribe desde la vista previa del archivo, en la ficha del producto del panel. El campo admite hasta 512 caracteres, y Shopify recomienda no pasar de 125, con un texto breve y descriptivo.⁠^{[5]Shopify Help Center. Adding alt text to product media}

Cómo comprobarlo

1. Abre el código fuente de una ficha y busca <img. Cada imagen debería tener alt: con texto si informa, vacío si decora.⁠^{[1]WHATWG. HTML Living Standard: requirements for providing text to act as an alternative for images}
2. Separa los tres casos: sin atributo, vacío y con texto. Una imagen sin atributo es un fallo; una vacía es una decisión.
3. Lee los textos en voz alta sin mirar las fotos. Si no sabrías qué producto es ni qué muestra cada imagen, el texto no sustituye a la imagen.
4. Busca imágenes con texto dentro, como tablas de tallas o de medidas: ese dato tiene que estar también en texto.
5. Si los textos los escribió una IA, revisa una muestra a mano antes de publicarlos.⁠^{[4]Google Search Central. Google Search's guidance on using generative AI content on your website}

Concepto cercano: el pie de foto y el meta title

El texto alternativo se confunde con otros textos que rodean a una imagen. El pie de foto se ve en la página, junto a la imagen, y la especificación de HTML pide que el texto alternativo no lo repita: cada uno hace un trabajo distinto.⁠^{[1]WHATWG. HTML Living Standard: requirements for providing text to act as an alternative for images} El nombre del archivo tampoco cuenta como texto alternativo: en el ejemplo de Google, una imagen con su archivo y sin atributo es el caso malo.⁠^{[3]Google Search Central. Google image SEO best practices} Y ninguno de ellos es el meta title, que no describe una imagen sino la página entera.

Para seguir, la ruta de lectura de catálogo y entidades ordena el resto de términos de la ficha.