texto alternativo

Qué es y para qué sirve realmente

El texto alternativo es el contenido del atributo alt de una imagen. Es lo que anuncia un lector de pantalla al llegar a ella, lo que muestra el navegador si el archivo no carga y lo que aparece si alguien navega con las imágenes desactivadas para ahorrar datos.

La idea que hay que interiorizar es esta: el alt no describe la imagen, sustituye a la imagen. La pregunta correcta no es «¿qué se ve aquí?», sino «si borro esta imagen, ¿qué frase tengo que poner en su lugar para que la página siga contando lo mismo?». Cambia la respuesta por completo.

La misma foto de una persona con un casco de obra puede necesitar tres textos distintos según dónde esté. En un artículo sobre seguridad laboral, alt="Operario con casco y arnés trabajando en un andamio". En la ficha de un producto, alt="Casco de protección amarillo con barbuquejo". Y en una cabecera decorativa donde el titular ya lo dice todo, alt="". La imagen es la misma; su función, no.

Las cuatro decisiones que resuelven el 95 % de los casos

Imagen informativa. Aporta información que no está en el texto de al lado. Se describe en una frase corta, concreta y sin adornos.

<img src="grafico-trafico.png"
     alt="El tráfico orgánico sube de 1.200 a 4.500 visitas entre enero y junio">

Imagen decorativa. No aporta nada: una textura de fondo, un icono junto a un texto que ya dice lo mismo, una foto de relleno. Lleva alt vacío, no ausente. Es una distinción clave: alt="" le dice al lector de pantalla «esto no aporta nada, sáltatelo». Si el atributo directamente no está, muchos lectores leen el nombre del archivo en voz alta, y ahí acabas escuchando «DSC guion cero cero cuatro dos punto jotapeg».

<img src="ornamento.svg" alt="">

Imagen funcional. Es un enlace o un botón. El alt describe la acción, no el dibujo. Un icono de sobre que lleva al formulario no es alt="sobre", es alt="Contactar".

Imagen compleja. Gráficos, mapas, infografías, diagramas. No caben en el alt. Se pone un alt breve que diga qué es y se ofrece la descripción completa en el propio texto de la página o en una tabla de datos accesible. Esto último, además, es contenido indexable: un gráfico es una imagen para el buscador, y una tabla con esos mismos datos, no.

Cómo se redacta

Reglas que aplico siempre:

• Nunca empezar por «imagen de» o «foto de». El lector de pantalla ya anuncia que es una imagen. Escribirlo produce «imagen, imagen de un operario». Es redundancia pura.
• Corto. Una frase. Si necesitas tres, la información debería estar en el texto de la página, no escondida en un atributo.
• Sin punto final en textos de una sola frase: algunos lectores lo interpretan como una pausa larga que no aporta nada.
• No repetir el pie de foto. Si la imagen ya lleva un figcaption visible con la descripción, el alt no debe decir lo mismo; se escucharía dos veces.
• En el idioma de la página. Un alt en inglés dentro de una página en español se lee con la fonética equivocada.

Lo que me encuentro auditando

Llevo veintiún años trabajando en marketing online, y la accesibilidad es una de las disciplinas que se cruzan por el camino: revisando webs de clientes he visto de todo, pero hay dos patrones que se repiten en casi todos los proyectos.

El primero es el alt rellenado con palabras clave. Herencia directa de una época del SEO en la que se metían términos de búsqueda en cualquier hueco. Todavía encuentro fichas de producto con alt="zapatillas running baratas comprar zapatillas running Tenerife oferta". Eso no posiciona —Google lleva muchos años detectándolo— y convierte la navegación con lector de pantalla en un castigo. Y en una tienda con cincuenta productos por página, se escucha cincuenta veces.

El segundo es el alt automático del gestor de contenidos. WordPress rellena el atributo con el nombre del archivo si no escribes nada, y el resultado es una página llena de alt="banner-home-v3-final-def". Formalmente la imagen tiene texto alternativo; ninguna herramienta automática lo marca como error. Y no significa absolutamente nada.

Mi comprobación es sencilla: leer en voz alta solo el texto y los alt de una página, sin ver el diseño. Si con eso me entero de qué va y qué puedo hacer, está bien resuelto. Si suena a lista de nombres de archivo, no.

Por qué le importa a un negocio

Empezando por lo obvio: sin alt útiles, una tienda no se puede usar sin ver. En un catálogo, la imagen es el producto. Si las cincuenta fichas suenan igual, no hay compra posible; y ahí no se pierde una visita, se pierde el cliente entero y todos los que le pregunten.

Después está el efecto colateral en posicionamiento, que es real aunque no sea el motivo principal. Un buscador no ve la imagen: lee el alt, el nombre del archivo y el texto de alrededor. Un texto alternativo descriptivo y honesto es lo que hace que una foto aparezca en la búsqueda de imágenes, un canal que en sectores visuales —hostelería, reformas, moda, inmobiliaria— trae tráfico cualificado y que casi nadie trabaja. Lo bueno es que la versión correcta para accesibilidad y la correcta para SEO son la misma: describir de verdad lo que hay.

Y hay un tercer beneficio poco comentado: los modelos de lenguaje que hoy citan webs en sus respuestas leen el HTML, no la imagen. Lo que no esté escrito, para ellos no existe.

Errores frecuentes

Empezar por «imagen de» o «fotografía de». Redundante en todos los casos. El lector de pantalla ya anuncia el tipo de elemento antes de leer el contenido.

Omitir el atributo en las imágenes decorativas. No es lo mismo alt="" que no poner alt. El primero silencia la imagen a propósito; el segundo deja al lector adivinando y a menudo deletreando el nombre del archivo.

Meter palabras clave. No mejora el posicionamiento y empeora la experiencia de quien depende del atributo. Una descripción natural rinde más en ambos frentes.

Describir la imagen en lugar de su función. Si la imagen es un enlace, el alt tiene que decir a dónde lleva. alt="lupa" no le sirve a nadie; alt="Buscar", sí.

Poner texto importante dentro de la imagen. Precios, condiciones, horarios o llamadas a la acción dentro de un JPG no se leen, no se copian, no se traducen, no se indexan y no se adaptan al zoom. Ese contenido va en HTML.