Alt text: qué es, cómo escribirlo y ejemplos

El alt text o texto alternativo describe la función o el contenido de una imagen cuando esta no puede percibirse visualmente. Se incorpora mediante el atributo `alt` de HTML y ayuda principalmente a las personas que utilizan lectores de pantalla.

También aporta contexto a los buscadores, pero no debe redactarse como una lista de palabras clave. Un buen texto alternativo depende de la imagen, del contenido que la rodea y de la función que cumple dentro de la página.

Qué es el alt text

Alt text significa “alternative text” o texto alternativo. Se añade al código de una imagen mediante el atributo `alt`:

Si la imagen no se carga, el navegador puede mostrar ese texto en su lugar. Además, los lectores de pantalla lo utilizan para transmitir a sus usuarios la información visual relevante.

Por tanto, no es correcto pensar que el alt text solo sirve para posicionar imágenes. Su primera función es contribuir a que el contenido sea comprensible con independencia de cómo se acceda a él.

Alt text, atributo alt y etiqueta alt: diferencias

Estos conceptos suelen utilizarse como equivalentes, pero técnicamente no significan exactamente lo mismo:

• Alt text: es el texto alternativo que describe o sustituye la función de la imagen.
• Atributo alt: es la parte del elemento HTML donde se introduce ese texto.
• Etiqueta alt: es una expresión extendida, pero imprecisa. `alt` no es una etiqueta independiente.
• Elemento img: es la etiqueta HTML utilizada para insertar la imagen.

En el ejemplo anterior, img es el elemento y alt es el atributo que contiene el texto alternativo.

Para qué sirve el texto alternativo

Mejorar la accesibilidad

Una persona que utiliza un lector de pantalla no recibe automáticamente la información que contiene una fotografía, un gráfico o un icono. El alt text permite incorporar esa información al recorrido de lectura.

No todas las imágenes deben describirse de la misma manera. La pregunta correcta no es “qué aparece en la foto”, sino qué necesita saber el usuario dentro de este contexto.

Mantener la información si la imagen no carga

Una ruta rota, un problema de conexión o un bloqueo de recursos puede impedir que se muestre una imagen. El texto alternativo conserva al menos la información necesaria para interpretar esa parte de la página.

Dar contexto a los buscadores

Los motores de búsqueda analizan el archivo, el texto cercano, la página y otros elementos para comprender una imagen. El atributo alt puede aportar una descripción adicional y ayudar a relacionarla con el contenido.

Forma parte de la optimización de imágenes, pero no sustituye el trabajo sobre formato, tamaño, dimensiones, nombre de archivo o rendimiento. Esos aspectos se desarrollan en nuestra guía para optimizar imágenes para web.

Cómo escribir un buen alt text

Describe la información relevante

Incluye aquello que permite comprender por qué la imagen está en la página. No es necesario enumerar colores, objetos o detalles que no aportan nada al mensaje.

Por ejemplo, en un artículo sobre resultados SEO:

• Demasiado genérico: “gráfico”.
• Excesivamente literal: “gráfico azul con una línea que sube de izquierda a derecha”.
• Útil: “La visibilidad orgánica aumentó un 32 % entre enero y junio”.

Ten en cuenta el contexto

La misma imagen puede necesitar textos alternativos diferentes en páginas distintas. Una fotografía de una oficina puede representar una ubicación, un proyecto de interiorismo o el entorno de trabajo de un equipo.

Si el pie de foto o el texto próximo ya comunica la misma información, repetirla palabra por palabra puede generar una experiencia redundante.

Escribe de forma breve y natural

Utiliza una frase clara y evita introducciones como “imagen de” o “fotografía de” salvo que el tipo de imagen sea relevante. El lector de pantalla ya anuncia que se trata de una imagen.

No existe una longitud válida para todos los casos. La descripción debe ser tan breve como sea posible y tan extensa como sea necesaria. Los gráficos complejos requieren una explicación fuera del atributo alt.

Utiliza palabras clave solo cuando sean descriptivas

Una palabra clave puede aparecer si describe naturalmente la imagen. Añadirla de forma repetitiva o forzada no mejora la accesibilidad y puede convertir el atributo en texto poco útil.

• Forzado: “agencia SEO Madrid servicios SEO posicionamiento SEO Madrid”.
• Natural: “Informe de visibilidad elaborado durante una auditoría SEO”.

Ejemplos de alt text buenos y malos

Cuándo una imagen debe tener el atributo alt vacío

Una imagen decorativa no comunica información ni realiza una acción. En ese caso debe conservar el atributo, pero dejar su contenido vacío:

Esto indica al lector de pantalla que puede ignorarla. Eliminar completamente el atributo no produce necesariamente el mismo resultado: algunas tecnologías pueden anunciar el nombre del archivo.

Son decorativos, por ejemplo:

• Fondos y texturas sin información.
• Formas utilizadas únicamente para separar secciones.
• Iconos que acompañan un texto y no añaden significado.
• Imágenes repetidas cuya información ya está escrita junto a ellas.

La herramienta de decisión para textos alternativos del W3C permite determinar cuándo describir una imagen, cuándo utilizar un alt vacío y cuándo aportar una explicación más extensa.

Cómo tratar diferentes tipos de imágenes

Fotografías informativas

Describe la información que justifica su inclusión. Si muestra un producto, indica sus características visibles relevantes. Si documenta un evento, explica quién aparece o qué está ocurriendo cuando sea necesario para entender el contenido.

Imágenes que funcionan como enlaces

Cuando una imagen es el único contenido de un enlace, el texto alternativo debe explicar su destino o acción, no limitarse a describir su apariencia.

Si el enlace ya contiene un texto visible con el mismo significado, la imagen puede considerarse decorativa para evitar repeticiones.

Iconos y botones

El texto debe comunicar la función: “Abrir menú”, “Buscar”, “Descargar informe” o “Cerrar ventana”. Describir “tres líneas horizontales” o “una cruz” explica la forma, pero no la acción.

Gráficos e infografías

El atributo alt debe identificar el gráfico y resumir su conclusión principal. Los datos completos deben estar disponibles como texto o tabla dentro de la página.

Intentar incluir todos los valores dentro del atributo genera una descripción difícil de navegar y mantener.

Imágenes que contienen texto

Siempre que sea posible, el texto importante debe existir como HTML y no estar integrado únicamente en una imagen. Cuando no pueda evitarse, el alt debe comunicar el mensaje relevante.

Imágenes de fondo en CSS

Las imágenes incorporadas mediante `background-image` no admiten el atributo alt. Por eso deberían utilizarse con una función decorativa. Si contienen información, esta debe aparecer también como texto accesible dentro del HTML.

Cómo añadir alt text en HTML

El atributo se escribe dentro del elemento `img`:

Es recomendable declarar también las dimensiones para reservar el espacio de la imagen durante la carga. El atributo `title` no sustituye al alt text y no debe utilizarse como alternativa.

Cómo añadir alt text en WordPress

WordPress permite introducirlo desde la Biblioteca de medios o desde los ajustes de la imagen dentro del editor. El campo aparece como “Texto alternativo”.

1. Selecciona la imagen en la Biblioteca de medios o en la página.
2. Localiza el campo “Texto alternativo”.
3. Describe su función dentro del contenido actual.
4. Actualiza la imagen o la página.
5. Comprueba el HTML público si necesitas confirmar el resultado.

Hay que tener en cuenta que el texto guardado en la Biblioteca de medios puede reutilizarse, aunque una misma imagen puede necesitar otra descripción en un contexto diferente. En una web diseñada con WordPress, este criterio debe formar parte de la gestión habitual de contenidos.

Alt text y SEO para imágenes

El texto alternativo ayuda a relacionar una imagen con la página, pero su efecto no debe analizarse de forma aislada. Google también puede interpretar:

• El contenido y los encabezados de la página.
• El texto situado alrededor de la imagen.
• El nombre y la URL del archivo.
• La leyenda visible.
• Los enlaces que apuntan a la imagen o la página.
• El sitemap de imágenes y los datos estructurados aplicables.

Rellenar todos los atributos con la misma palabra clave no construye una estrategia de SEO para imágenes. El objetivo es que cada recurso sea útil, comprensible y coherente con la intención de la página.

Una revisión de SEO técnico puede detectar imágenes sin atributo, archivos rotos o implementaciones que dificultan el rastreo, pero la corrección final requiere interpretar la función de cada imagen.

Errores frecuentes al redactar textos alternativos

• Copiar el mismo alt text en todas las imágenes.
• Introducir varias palabras clave sin una frase comprensible.
• Describir una imagen decorativa que debería ignorarse.
• Dejar vacío el alt de una imagen que comunica información.
• Utilizar el nombre automático del archivo como descripción.
• Empezar siempre por “imagen de” o “foto de”.
• Describir la apariencia de un botón en lugar de su acción.
• Incluir una infografía completa dentro de un atributo excesivamente largo.
• Confiar en una generación automática sin revisar el contexto.

Estos errores aparecen con frecuencia cuando el alt text se trata como un campo SEO obligatorio que hay que rellenar rápidamente. La accesibilidad exige revisar primero si la imagen informa, actúa como enlace o solo decora.

Cómo revisar los atributos alt de una web

Inspección manual

Puedes utilizar la opción “Inspeccionar” del navegador para localizar el elemento `img` y leer su atributo. Es útil para comprobar imágenes concretas.

Rastreo de la web

Una herramienta de rastreo permite localizar imágenes sin atributo, con alt vacío o con descripciones repetidas. El informe es un punto de partida, no una lista de errores automáticos: un alt vacío puede ser completamente correcto.

Revisión con lector de pantalla

Escuchar el recorrido ayuda a detectar repeticiones, descripciones confusas y elementos cuya función no resulta comprensible sin verlos.

Revisión contextual

La fase más importante consiste en decidir qué debe comunicar cada imagen. Esta parte no puede resolverse únicamente contando caracteres o comprobando si el campo está relleno.

Si necesitas evaluar el conjunto de señales técnicas y de contenido, una auditoría SEO permite priorizar los problemas que realmente pueden afectar a la web.

Checklist para redactar un alt text

• ¿La imagen aporta información o es decorativa?
• ¿Qué perdería el usuario si no pudiera verla?
• ¿Esa información ya aparece en el texto cercano?
• ¿La imagen realiza una acción o funciona como enlace?
• ¿La descripción resulta natural y específica?
• ¿He evitado repetir palabras clave?
• ¿Un gráfico complejo tiene una explicación adicional?
• ¿El texto seguiría siendo útil si la imagen no cargara?

Lecturas relacionadas

• Accesibilidad web para mejorar la experiencia
• Cómo crear una web profesional optimizada para SEO
• Cómo mejorar el SEO de una página web