Texto alternativo en imágenes

Qué falla

La accesibilidad de las imágenes falla de cuatro maneras, y cada una se corrige distinto.

Sin atributo alt. El lector de pantalla recurre al nombre del archivo, y la persona oye “IMG guion bajo 4 0 3 2 punto jpg”. Es el fallo más fácil de encontrar y de corregir.

Un alt que no dice nada. alt="imagen", alt="foto", alt="banner", o el nombre del producto repetido en las seis fotos de la galería. El atributo existe, así que una revisión rápida lo da por bueno, pero la persona no se entera de nada.

Enlaces y botones que son solo una imagen. El logo que lleva a la portada, la lupa que abre el buscador, el icono del carrito. Si la imagen es el único contenido de un enlace o botón, su alt es el nombre de ese control. Sin él, el lector anuncia “enlace” o “botón” y nada más.

Texto dentro de imágenes. Un banner promocional donde la oferta, las fechas y las condiciones forman parte del dibujo. Si ese texto no está también en el alt o en la página, no existe para un lector de pantalla, no se puede ampliar, traducir ni encontrar en un buscador.

Cómo probarlo

Diez minutos en tus páginas clave.

1. Abre en Chrome una ficha de producto y una página de campaña.
2. Haz clic derecho sobre una imagen y elige Inspeccionar. Busca alt= en el <img> resaltado.
3. Pregúntate, imagen por imagen: si solo pudiera oír este texto, ¿perdería algo importante?
4. Revisa cada enlace o botón que sea solo un icono o un logo. Su alt (o su aria-label) tiene que decir qué hace: “Inicio”, “Buscar”, “Carrito, 2 productos”.
5. Busca los banners con palabras y comprueba que esas palabras también están en la página.

Un análisis automático encuentra en segundos todas las imágenes sin atributo alt y todos los enlaces de imagen sin nombre de una página. Si el texto que sí hay es útil es una cuestión de significado, y el informe de auditoría te lo marca para que lo revises.

Cómo escribirlo

Describe para qué está la imagen, no todo lo que contiene. La misma foto necesita un alt distinto según la página.

<!-- Ficha de producto: la persona está eligiendo -->
<img src="botin.jpg" alt="Botín de piel negro con cremallera lateral, vista frontal">

<!-- Artículo sobre un zapatero: la persona está leyendo una historia -->
<img src="botin.jpg" alt="Un botín terminado sobre el banco de trabajo, junto a la horma">

En enlaces y botones, nombra la acción. El alt de una imagen dentro de un enlace es el texto del enlace.

<!-- Se lee "enlace, imagen" -->
<a href="/"><img src="logo.svg"></a>

<!-- Se lee "Uxerfy, inicio, enlace" -->
<a href="/"><img src="logo.svg" alt="Uxerfy, inicio"></a>

Deja vacías las imágenes decorativas, a propósito. alt="" le dice al lector de pantalla que salte la imagen. Úsalo en formas de fondo, separadores y fotos que solo dan ambiente junto a un texto que ya lo dice todo.

Saca las palabras de las imágenes. Pon la oferta en texto HTML real, encima o al lado de la imagen. Se ve nítida en cualquier pantalla, se traduce y los buscadores la leen.

Hazlo parte del proceso de publicación. La mayoría de alts que faltan vienen del gestor de contenidos: alguien sube la foto de un producto y el campo alt es opcional. Hazlo obligatorio para las imágenes de contenido y añádelo a la lista de quien sube las fotos.

Por qué importa comercialmente

En una tienda online, para la mayoría de visitas las fotos son el producto. Para quien usa un lector de pantalla, el texto alternativo es la única versión de esas fotos. “Imagen” o el nombre de un archivo no le dice nada del color, la forma o lo que incluye, que es justo lo que vino a buscar. Y un buen alt alimenta también la búsqueda de imágenes y los asistentes de IA, así que la misma corrección atrae visitas.