El texto alternativo es un equivalente textual de una imagen. En HTML es el atributo alt de un elemento img; en la práctica, su función es conservar la finalidad de la imagen cuando el lector no puede verla. Un lector de pantalla puede anunciarlo, una vista solo de texto o de bajo ancho de banda puede mostrarlo, y los sistemas de búsqueda pueden usarlo junto con la página para entender una imagen. No sirve para repetir una consulta objetivo ni como palanca de posicionamiento aislada.
Finalidad, no palabras clave
Los mismos píxeles pueden necesitar alternativas distintas según el contexto. Una foto de una taza azul en una ficha de producto puede necesitar el nombre del producto, el color y el material. En un artículo sobre hábitos de oficina, el dato útil puede ser que la taza está junto a una libreta. Si la foto solo decora un párrafo que ya dice lo mismo, la alternativa correcta puede estar vacía: alt="". Las pautas de imágenes del W3C hacen esta distinción según la finalidad: las imágenes informativas describen la información esencial, las funcionales describen la acción o el destino, y las decorativas reciben una alternativa nula.
- Imagen informativa
- Indica la información que el lector no vería de otro modo: «Taza de cerámica azul junto a una libreta sobre un escritorio».
- Imagen funcional
- Nombra la acción o el destino: «Finalizar compra» es más útil que «icono de carrito».
- Imagen decorativa
- Usa alt="" cuando no aporte información y no sea un control interactivo.
- Gráfico o diagrama complejo
- Usa un resumen breve en alt y pon las conclusiones, las etiquetas y los datos en el texto cercano o en una descripción enlazada.
Elige la alternativa adecuada
Empieza por el mensaje de la página y decide después qué papel cumple la imagen. Así evitas el error habitual de describir un detalle vistoso mientras omites el dato necesario para entender la página. En un gráfico, una etiqueta como «Registros mensuales» rara vez basta; el texto también debe indicar la tendencia y los valores que importan. En una imagen enlazada, Google documenta que su texto alternativo se usa como texto ancla, así que la alternativa debe comunicar el destino o la acción. Una imagen decorativa dentro de un enlace es distinta: el enlace sigue necesitando un nombre accesible a partir del texto visible u otra etiqueta fiable.
| Uso de la imagen | Alternativa útil | Qué evitar |
|---|---|---|
| Fotografía de producto | Producto concreto, variante distintiva y estado visible | Un eslogan comercial o una consulta de compra repetida |
| Botón con icono | La acción, por ejemplo «Descargar informe» | «Flecha azul» |
| Gráfico | Conclusión breve y texto cercano con todos los datos | Una larga secuencia de valores metida en alt |
| Separador decorativo | Atributo alt vacío | Un nombre de archivo o una «decoración» genérica |
Redacta y comprueba el texto alternativo
Redacta la alternativa cuando la imagen ya esté colocada junto a su texto final. Mantenla lo bastante corta para que se oiga como parte de la frase, sitúa pronto la distinción clave y usa términos que el lector ya ve en la página, siempre que sean pertinentes. No fijes un número universal de caracteres: un icono puede necesitar dos palabras y una foto de producto una frase corta. Si el concepto no cabe en pocas palabras, haz visible la explicación más larga en el contenido de la página.
- Clasifica la imagen como informativa, funcional, compleja o decorativa en su contexto final de página.
- Redacta la frase más corta que conserve su finalidad; elimina «imagen de» y otros marcos que no aporten significado.
- Compara la alternativa con el pie de foto, el encabezado y el texto cercano para que no los contradiga ni se limite a repetirlos.
- Revisa el HTML renderizado para encontrar el elemento img y el valor alt previsto; las URL de imagen y el título del medio en el CMS no lo sustituyen.
- En una plantilla representativa, escucha la página con un lector de pantalla o inspecciona el árbol de accesibilidad, y después revisa una muestra de componentes repetidos y casos sin imagen.
Distingo una imagen que transmite significado de una decoración, y luego redacto el texto alternativo para ese significado, sin meter en él un nombre de archivo ni palabras clave. Esta práctica es un método de revisión, no una prueba de que todas las imágenes de un sitio sean accesibles; una revisión completa también comprueba las plantillas renderizadas, las imágenes enlazadas y los flujos editoriales.
Límites y errores habituales
El texto alternativo ayuda a la accesibilidad y da a los sistemas de búsqueda una pista relevante, pero no puede reparar un control inaccesible, una imagen bloqueada, un texto de página irrelevante ni la falta de una explicación textual de un recurso visual complejo. Google usa el contexto de la página, los pies de foto y otras señales, además del texto alternativo, para entender las imágenes. Trata como comprobaciones separadas el descubrimiento de imágenes y la calidad de la página de destino de la imagen.
- No uses un nombre de archivo, un título del CMS ni una lista de palabras clave como alternativa.
- No des por hecho que cualquier alt no vacío es mejor: las imágenes decorativas deben omitirse normalmente con alt="".
- No hagas que el alt transmita instrucciones legales, datos o una llamada a la acción que no aparezca en ningún otro lugar de la página.
- No reutilices la misma alternativa genérica en imágenes de productos distintos solo porque una plantilla la admite.
- No afirmes que añadir texto alternativo garantiza posiciones en la web, la inclusión de imágenes ni un resultado de conformidad de accesibilidad.