Alt text efectivo: la técnica que mejora SEO y accesibilidad sin esfuerzo

El alt text es uno de esos detalles que la mayoría de los proyectos web ignoran durante meses y luego tratan de resolver en masa con herramientas automáticas. El problema es que ese enfoque reactivo genera descripciones genéricas que no aportan ni a la accesibilidad ni al SEO. Escribirlo bien desde el principio cuesta poco: exige entender cuándo escribirlo, qué describir según el tipo de imagen, y qué errores evitar. Este post recorre todo eso con ejemplos concretos.

1. Qué es el alt text y por qué importa más de lo que parece

El atributo alt en una etiqueta <img> proporciona una descripción textual de la imagen. Su función original era mostrarse cuando la imagen no cargaba; hoy cumple dos roles que se refuerzan mutuamente.

Accesibilidad: los lectores de pantalla leen el alt text en voz alta a usuarios con discapacidad visual. Sin él, el lector anuncia el nombre del archivo (DSC_0438.jpg), que no comunica nada útil. La norma WCAG 2.1 (criterio de éxito 1.1.1) exige texto alternativo para todo contenido no textual.

SEO: Google no puede “ver” imágenes de la misma forma que los humanos. Según la documentación oficial de Google Search Central, el alt text es el atributo que más contribuye a aportar metadatos a una imagen, y lo combina con algoritmos de visión computacional para entender el contenido visual. Una imagen bien descrita puede aparecer en Google Images, en los resultados de texto enriquecidos y en las respuestas de IA generativa, que cada vez incorporan más metadatos visuales estructurados.

La conclusión práctica: un alt text bien escrito hace trabajo doble. Un alt text ausente o relleno con palabras clave a granel hace daño en los dos frentes.

2. Cuándo escribirlo y cuándo dejarlo vacío

La regla no es “siempre escribe algo”. Es “siempre incluye el atributo alt, pero decide qué poner”.

Imágenes informativas: fotografías, diagramas, capturas de pantalla, infografías, gráficos. Necesitan descripción. El lector debe poder entender qué aporta la imagen sin verla.

Imágenes funcionales: íconos que actúan como botones o enlaces. El alt text describe la función, no la apariencia. Un ícono de lupa que abre la búsqueda tiene alt="Abrir búsqueda", no alt="lupa".

Imágenes decorativas: separadores visuales, fondos, formas abstractas, imágenes de ambiente sin contenido informativo. Aquí la regla es alt="" (sin espacio entre las comillas). Esto indica explícitamente al lector de pantalla que ignore la imagen. Omitir el atributo por completo es un error: algunos lectores de pantalla anuncian entonces el nombre del archivo.

3. Patrones por tipo de imagen

La calidad del alt text depende del tipo de imagen. No existe una fórmula única; existe un criterio distinto para cada caso.

Fotografías

Describe lo que muestra la imagen en su contexto dentro de la página. No hace falta empezar con “imagen de” o “foto de”: el lector de pantalla ya anuncia que es una imagen. El nivel de detalle debe ajustarse a lo que la imagen aporta al contenido.

<!-- Demasiado genérico -->
<img src="equipo.jpg" alt="personas">

<!-- Correcto -->
<img src="equipo.jpg" alt="Tres personas trabajando alrededor de una mesa con portátiles abiertos en una oficina con luz natural">

Diagramas e infografías

Aquí el reto es mayor: una imagen puede contener mucha información estructurada. Si el diagrama es sencillo, un alt text conciso puede bastarte. Si es complejo (un flujo de proceso con múltiples ramas, una tabla de datos visualizada), lo recomendable es proporcionar una descripción larga en el texto del artículo o usar el atributo aria-describedby apuntando a un elemento con la explicación completa.

<!-- Diagrama simple -->
<img src="flujo-despliegue.png" alt="Flujo de despliegue: rama dev → staging → main, con revisión manual en cada paso">

<!-- Diagrama complejo: el alt apunta al resumen, el detalle va en el texto -->
<img src="arquitectura-cloud.png" alt="Diagrama de arquitectura cloud descrito en el párrafo siguiente" aria-describedby="desc-arquitectura">
<p id="desc-arquitectura">La arquitectura consta de tres capas: ...</p>

Capturas de pantalla

Describe lo que muestra la pantalla, no el contexto de la herramienta. Si la captura muestra un error, inclúyelo.

<!-- Débil -->
<img src="lighthouse-resultado.png" alt="Lighthouse">

<!-- Correcto -->
<img src="lighthouse-resultado.png" alt="Resultado de Lighthouse: puntuación de rendimiento 94, accesibilidad 100, mejores prácticas 96, SEO 100">

Imágenes de texto

Evítalas siempre que sea posible. Si una imagen contiene texto importante (un titular, un dato clave), el alt text debe incluir ese texto exacto, y lo ideal es que ese contenido también esté en HTML para que sea indexable y traducible.

4. Errores que matan SEO y accesibilidad

Keyword stuffing en el alt text. La documentación de Google lo señala explícitamente como spam. alt="diseño web Málaga freelance desarrollo web barato Málaga" no describe la imagen: penaliza.

Alt text idéntico en todas las imágenes. Si tienes diez imágenes de producto con alt="producto", ninguna aporta nada. El buscador no puede diferenciarlas y el lector de pantalla las anuncia igual.

Incluir “imagen de” o “foto de”. Los lectores de pantalla ya anuncian que es una imagen. Añadir esa muletilla consume caracteres sin aportar información.

Dejar el atributo vacío en imágenes informativas. Es el error más frecuente y el de mayor impacto. Una captura de pantalla con alt="" es invisible para buscadores y usuarios de lector de pantalla.

Usar el nombre de archivo como alt text. Suele pasar cuando el CMS genera el atributo automáticamente a partir del nombre del archivo subido. alt="IMG_20250312_092347" no describe nada.

Alt text que describe la imagen en lugar de su función. Para imágenes que actúan como enlaces o botones, la descripción debe responder a “¿a dónde lleva esto?” o “¿qué hace esto?”, no “¿cómo es esto?“.

5. Longitud y tono adecuados

No existe un límite oficial obligatorio, pero la orientación general es mantener el alt text en una frase concisa. Google puede procesar textos más largos para Google Images, pero para el uso de lectores de pantalla, un texto largo interrumpe el flujo de lectura.

Criterio práctico: escribe lo que necesitarías decirle por teléfono a alguien para que entienda qué muestra la imagen y por qué está ahí. Si la respuesta a “por qué está ahí” es “solo por decoración”, usa alt="".

No uses puntuación de cierre innecesaria si el alt text es una frase fragmentada. Si es una frase completa, sí puedes usar punto final; algunos lectores de pantalla añaden una pausa natural al encontrarlo.

6. El alt text en el contexto del SEO de imágenes

El alt text no trabaja solo. Google combina varias señales para entender y posicionar una imagen: el alt text, el texto circundante, el nombre del archivo, el título de la página y el contexto general del sitio. Esto tiene dos implicaciones prácticas:

• Un alt text bien escrito en una página irrelevante no va a posicionar la imagen para queries exigentes. El contexto de página importa.
• El nombre de archivo también contribuye. auditoria-lighthouse-resultado.png da más contexto que screenshot-001.png, aunque el alt text sea el mismo.

Si quieres entender cómo Google evalúa la calidad técnica y de accesibilidad de tu web en conjunto, el artículo sobre qué es Lighthouse y cómo interpretarlo explica las métricas que el auditor automático usa, incluyendo el flag de imágenes sin alt text.

7. Checklist de auditoría de alt text

Antes de publicar cualquier página o post, repasa esta lista:

• Todas las imágenes tienen el atributo alt (aunque sea vacío).
• Las imágenes decorativas tienen alt="" (sin espacio entre las comillas).
• Las imágenes informativas tienen una descripción que comunica su contenido en contexto.
• Las imágenes que actúan como enlaces o botones describen su función o destino.
• No hay keyword stuffing: el alt text es legible como frase en español.
• No se repite “imagen de”, “foto de” ni el nombre del archivo.
• Los diagramas complejos tienen descripción larga disponible en el texto o vía aria-describedby.
• El nombre de archivo es descriptivo (no IMG_001.jpg).

Para webs con muchas imágenes ya publicadas, herramientas como axe DevTools o la auditoría de accesibilidad de Lighthouse detectan automáticamente imágenes con atributo alt ausente o vacío en contextos donde debería haber descripción. Son un buen punto de partida para una auditoría sistemática.

---

Si tras revisar tu web encuentras un volumen importante de imágenes sin alt text o con descripciones genéricas, cuéntame en qué punto estás: es un tipo de corrección que encaja bien en una auditoría técnica orientada a resultados medibles en accesibilidad y SEO.