Textos alternativos: la finalidad de la imagen decide

¿Qué es un texto alternativo?

El texto alternativo está en el atributo alt de una imagen. Los lectores de pantalla lo leen en voz alta, y el navegador lo muestra si la imagen no carga. Para las personas que no ven la imagen, sustituye la información visual. En la propia página suele ser invisible. En el CMS lo encontrarás como campo «Texto alternativo» en la biblioteca de medios o en el bloque de imagen. También ayuda cuando las imágenes no cargan por una conexión lenta, y Google lo usa para clasificar las imágenes.

En el criterio 1.1.1, de nivel A, las WCAG exigen que el contenido no textual tenga una alternativa textual con la misma finalidad. Es uno de los requisitos más básicos y afecta a casi todas las webs.

¿Cómo escribo un buen texto alternativo?

Pregúntate primero: ¿qué faltaría sin la imagen? Una foto de producto puede mostrar una característica relevante: «Mochila con el compartimento para portátil abierto». En una receta, la ilustración puede explicar un paso. Describe la información que importa para la tarea, en lugar de enumerar cada detalle visible. En la tienda, para una foto de producto suele bastar «Zapatilla de senderismo Alpina en gris, vista lateral»; en la vista de detalle de la suela, en cambio, cuenta «Suela con dibujo de surcos profundos».

La misma foto puede necesitar un texto distinto según la página. El retrato de una empleada en la página de contacto podría decir «Anna Weber, persona de contacto para colaboraciones». En una crónica sobre una reunión de equipo importa más lo que está haciendo. Sé breve y omite expresiones como «imagen de»: los lectores de pantalla suelen anunciar ya el elemento como gráfico. El W3C no fija un límite de longitud. Para la mayoría de las imágenes bastan una o dos frases cortas; si hace falta más, probablemente la información debería ir en el texto. Como prueba, lee el texto alternativo junto con el párrafo que lo rodea. Si algo suena repetido o falta algo, ajústalo.

¿Cuándo lleva una imagen un texto alternativo vacío?

Si una imagen solo decora y no aporta información adicional, escribes alt="". Ejemplos son los patrones de fondo, las líneas divisorias, las imágenes de ambiente sin contenido informativo o un icono justo al lado de un texto que dice lo mismo.

No omitas el atributo sin más. Si falta por completo, algunos lectores de pantalla leen en su lugar el nombre del archivo, por ejemplo «IMG 4711 final punto jpg». Un texto alternativo vacío, en cambio, indica claramente: puedes saltarte esta imagen.

En los grupos de imágenes, una imagen lleva la información de todas. Las cinco estrellas de una valoración no necesitan cinco veces «estrella», sino una vez «4 de 5 estrellas»; las demás estrellas llevan alt="".

¿Qué escribo en las imágenes enlazadas y los logotipos?

En las imágenes funcionales describes lo que ocurre, no su aspecto. Un logotipo de empresa enlazado puede transmitir el nombre y el destino, por ejemplo «Panadería Sommer, ir a la página de inicio». Una lupa como botón se llama «Buscar»; un icono de carrito, «Carrito».

Si junto a la imagen, dentro del mismo enlace, ya hay un texto visible, la imagen suele llevar un texto alternativo vacío. Si no, el destino se oye dos veces.

Los iconos SVG en línea no tienen atributo alt. Un SVG con significado lleva, por ejemplo, role="img" y un nombre mediante aria-label o un elemento title. Un icono puramente decorativo lo ocultas con aria-hidden="true".

¿Cómo describo diagramas e infografías?

En un gráfico con muchos valores, un texto alternativo corto no suele bastar. Indica en el texto alternativo de qué trata y remite a los detalles, por ejemplo «Gráfico de barras: consultas por mes en 2026, valores en la tabla inferior». Añade los valores como descripción textual comprensible o como tabla de datos en el contenido.

Así, las relaciones y las cifras siguen disponibles también sin el gráfico. Además, la tabla ayuda a quienes quieren consultar o copiar los valores con exactitud. Para un diagrama de proceso suele encajar una lista numerada de los pasos; para un mapa de cómo llegar, la dirección como texto.

¿Qué pasa con las imágenes que contienen texto?

Evita el texto en imágenes cuando sea posible usar texto real. En el nivel AA, el criterio 1.4.5 de las WCAG exige presentar la información como texto y no como imagen de texto, con excepciones como los logotipos. El texto real se puede ampliar, cambiar de color y traducir.

Si una imagen contiene texto, por ejemplo un banner promocional, el texto alternativo debe recoger esas mismas palabras. Los datos importantes, como el precio, el plazo o el código de descuento, deberías indicarlos además en el texto de la página. En los gráficos con citas para redes sociales, la cita completa va en el texto alternativo o en el texto de la publicación.

¿Qué errores son frecuentes en los textos alternativos?

1. 1Nombres de archivo o marcadores como «Imagen1» o «Header» como texto alternativo.
2. 2Un logotipo enlazado con el texto alternativo «Logo», sin nombre ni destino.
3. 3Palabras clave encadenadas. Google desaconseja expresamente llenar los atributos alt de palabras clave.
4. 4Una repetición literal del pie de foto que está justo al lado.
5. 5El mismo texto alternativo para todas las fotos de producto, aunque muestren el color, la parte trasera o un detalle.
6. 6Un texto alternativo de la biblioteca de medios escrito para otro contexto que aquí no encaja.
7. 7Descripciones extensas para la decoración pura.
8. 8Textos alternativos en un idioma distinto al de la página, por ejemplo textos en inglés de un banco de imágenes.
9. 9Información importante en una imagen de fondo CSS: estas imágenes no tienen texto alternativo y son invisibles para los lectores de pantalla.

¿Pueden los escáneres y la IA escribir textos alternativos?

Un escáner detecta con fiabilidad un atributo que falta, pero no si una descripción transmite lo que se pretende. Las propuestas de la IA suelen describir lo que se ve y no aciertan con la finalidad en el contexto. Úsalas como punto de partida y pregúntate en cada propuesta: ¿encaja con la finalidad en esta página? Accessonaut detecta los textos alternativos que faltan en las páginas analizadas; tú revisas tus propios textos o las propuestas de IA y los apruebas de forma selectiva. Después de los cambios, comprueba también el resultado con un lector de pantalla.