¿Qué es el Atributo ALT?

El alt es un atributo del elemento <img> en HTML, presente en la especificación desde sus primeras versiones. Su función es ofrecer una alternativa textual al contenido visual: cuando la imagen no se puede percibir, el texto del alt ocupa su lugar. Es, junto con el propio atributo src, uno de los pocos que un marcado accesible no puede omitir.

En frameworks y sistemas de gestión de contenido modernos, el atributo se rellena a menudo de forma automática con el nombre del archivo si nadie lo edita a mano, lo que casi nunca da una descripción útil. Se confunde a menudo con otros dos elementos que parecen similares pero cumplen funciones distintas. El atributo title muestra un tooltip al pasar el ratón por encima, pensado para usuarios con ratón, no para lectores de pantalla, que no lo anuncian por defecto. El elemento figcaption es una leyenda visible dentro de una figura, pensada para todo el mundo, no solo para quien no puede ver la imagen.

La obligación de ofrecer un texto alternativo no es una recomendación suelta: está en el Criterio de Éxito 1.1.1 («Contenido no textual») de las pautas WCAG del W3C, la base de la mayoría de normativas de accesibilidad web.

El error más caro en la práctica es usar title como si fuera un sustituto del alt: como la mayoría de lectores de pantalla lo ignoran, una imagen con solo title y sin alt sigue siendo invisible para quien depende de ese texto.

Cuando un lector de pantalla llega a una imagen, lee el contenido del atributo alt en voz alta. Si el atributo está presente pero vacío (alt=""), el lector de pantalla salta la imagen sin anunciarla, el comportamiento correcto para elementos puramente decorativos. Si el atributo falta directamente, distinto de estar vacío, algunos lectores de pantalla recurren al nombre del archivo, y anunciar «IMG_047382 punto jpg» es peor que no decir nada.

<!-- Imagen informativa: alt descriptivo -->
<img src="/images/glosario-json-ld-diagrama.webp" alt="Estructura de un bloque JSON-LD con @context y @type">

<!-- Error: atributo alt ausente por completo -->
<img src="/images/glosario-json-ld-diagrama.webp">

<!-- Imagen decorativa: alt vacío a propósito -->
<img src="/images/separador-decorativo.webp" alt="">

Google usa el texto del alt junto con sus propios algoritmos de visión por computador y el contenido de la página para entender de qué trata una imagen. Ese texto pesa sobre todo en los resultados de Google Imágenes, no como factor de posicionamiento general de la página. Si la imagen funciona además como enlace, el alt hace de texto ancla para ese enlace, con el mismo peso que tendría un enlace de texto normal.

La decisión de qué poner depende del tipo de imagen. Ante una imagen informativa, el texto describe lo que aporta al contexto de la página, no cada detalle visual. Ante una imagen funcional, como un icono de búsqueda dentro de un botón, el texto describe la acción, no el dibujo. Ante una imagen decorativa, el alt se deja vacío a propósito, nunca ausente.

La razón principal es de accesibilidad: sin un alt adecuado, una persona que usa lector de pantalla no tiene ninguna otra vía para saber qué muestra la imagen. Eso decide si puede usar la página o si se queda fuera. En muchos sectores, como las entidades públicas o las grandes empresas, un marcado accesible es además, hoy en día, una exigencia legal, no una prestación voluntaria.

Hay también una razón de posicionamiento, más limitada de lo que se suele asumir. El alt ayuda a Google a situar la imagen en el contexto correcto y a decidir si aparece en una búsqueda de imágenes, pero rellenarlo de palabras clave sin sentido tiene el efecto contrario: Google lo trata como una señal de spam.

Y hay un riesgo de confianza en el propio texto: un alt mal escrito se nota en la experiencia real de quien depende de él. Un usuario que escucha el nombre de un archivo en lugar de una descripción sabe de inmediato que la página no se pensó para él.

• Describe lo que la imagen aporta al contexto de esa página concreta, no una lista de lo que literalmente se ve en ella.
• Deja alt="" vacío pero presente en imágenes puramente decorativas; nunca omitas el atributo por completo.
• Si la imagen es un enlace o un botón, describe el destino o la acción, no el aspecto visual del icono.
• Mantén el texto conciso, en torno a 80-140 caracteres; suficiente para ser útil, sin cansar a quien lo escucha con un lector de pantalla.
• No repitas la misma palabra clave en varias imágenes distintas de la misma página.
• No dupliques en el alt lo que ya dice un pie de foto visible junto a la imagen; son textos con funciones distintas.

• Omitir el atributo alt por completo en lugar de dejarlo vacío a propósito en imágenes decorativas.
• Rellenar el alt con una lista de palabras clave en vez de una frase con sentido.
• Empezar el texto con «imagen de» o «foto de»: el lector de pantalla ya anuncia por su cuenta que se trata de una imagen.
• Usar el atributo title como sustituto del alt, sin saber que la mayoría de lectores de pantalla no lo leen.
• Copiar el mismo alt genérico en decenas de imágenes de producto que en realidad son distintas entre sí.