# Texto alternativo (alt): qué es y cómo escribirlo

> Qué es el texto alternativo o atributo alt, para qué lo usan Google y los lectores de pantalla y cómo escribirlo en tus fichas.

URL: https://clione.ai/es/glosario/texto-alternativo/
Lang: es

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:[^whatwg-alt]

- **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.[^wcag-111]

### 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.[^google-images] 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**.[^google-images]

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.[^google-genai-content] Un modelo que describe mal una foto produce una [alucinación](/es/glosario/alucinacion/) igual que si se equivocara en la [descripción de producto](/es/glosario/descripcion-de-producto/).

## En una tienda

Un **ejemplo ficticio**: la [ficha de producto](/es/glosario/ficha-de-producto/) de una mochila para cámara, con cuatro imágenes.

| Imagen                               | Texto alternativo flojo                     | Texto alternativo útil                                                               | Por qué                                                                                                               |
| ------------------------------------ | ------------------------------------------- | ------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------- |
| Foto principal, la mochila de frente | `IMG_4031.jpg`                              | Mochila para cámara gris de 20 litros, vista frontal con la funda de lluvia recogida | Dice lo que se ve y lo que distingue a este producto                                                                  |
| Detalle del interior                 | `mochila mochila cámara mochila fotografía` | Interior con separadores acolchados: un cuerpo de cámara y tres objetivos            | Una ristra de palabras no describe nada, y Google avisa de que puede hacer que vea el sitio como spam[^google-images] |
| Tabla de medidas en imagen           | `medidas`                                   | Medidas exteriores: 30 × 18 × 46 cm, peso 1,4 kg                                     | Si la imagen tiene texto, el texto alternativo lo da; mejor aún, escríbelo también en la ficha                        |
| Icono decorativo entre secciones     | `icono`                                     | (vacío)                                                                              | Es decoración: se marca con `alt=""` para que el lector de pantalla lo salte[^whatwg-alt]                             |

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

```html
<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.[^shopify-alt]


Que el texto alternativo es un hueco para palabras clave. Es una descripción para quien no ve la imagen, y Google lo dice sin rodeos: llenar el atributo de palabras clave da una mala experiencia y puede hacer que considere el sitio spam.[^google-images] La otra confusión frecuente es pensar que todas las imágenes necesitan texto: **una decorativa lleva el atributo vacío**, y describirla solo añade ruido a quien escucha la página.[^wcag-111]


## 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.[^whatwg-alt]
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.[^google-genai-content]

## 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.[^whatwg-alt] 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.[^google-images] Y ninguno de ellos es el [meta title](/es/glosario/meta-title/), que no describe una imagen sino la página entera.

Para seguir, la [ruta de lectura de catálogo y entidades](/es/aprender/catalogo-y-entidades/) ordena el resto de términos de la ficha.