Escribe texto alternativo con sentido

Qué comprueba esta auditoría

Recorre cada elemento <img> de la página e inspecciona el atributo alt. La comprobación falla cuando el alt es uno de estos casos: un nombre de archivo (IMG_2837.jpg, hero-final-v2.png), un marcador genérico (image, picture, photo, img, imagen, foto), un único carácter (x, .) o empieza por “Imagen de” / “Foto de” — la tecnología asistiva ya anuncia el rol como “gráfico”, así que anteponer la descripción es ruido redundante.

Esta es la comprobación complementaria a Alt text de imágenes, que solo verifica la presencia. Aquí se evalúa la calidad.

Por qué importa

Un alt malo empeora activamente la experiencia.

• Los usuarios de lectores de pantalla lo oyen en lugar de ver la imagen. “IMG guion bajo dos ocho tres siete punto jota-pe-ge” es el peor desenlace posible: la tecnología asistiva lee el nombre del archivo letra por letra.
• Los buscadores usan el alt como señal de posicionamiento en búsqueda de imágenes. Un nombre de archivo como alt desperdicia ese espacio.
• Los extractores de IA (LLM multimodales que escanean la página) citan el alt al describirla. Una página donde todos los alts son hero.jpg se lee como descuidada, tanto para humanos como para la IA.

La solución no es “añadir más palabras”. Es “describir la imagen, en su contexto, en lenguaje sencillo”.

Cómo solucionarlo

Abre cada imagen marcada y reescribe el alt para describir lo que transmite la imagen en el contexto donde aparece. Misma imagen, página distinta, alt distinto: es lo normal.

Imágenes decorativas (bordes de logos, separadores, patrones de hero) — alt vacío:

<img src="/divider.svg" alt="">

alt="" le dice al lector de pantalla “sáltatela; no aporta significado”. No omitas el atributo por completo: la ausencia de alt hace que algunos lectores recurran a anunciar el nombre del archivo.

Imágenes informativas — describe la función o el contenido:

<!-- Mal -->
<img src="/charts/q3.png" alt="gráfico">
<img src="/team/jane.jpg" alt="IMG_2837.jpg">
<img src="/screenshot.png" alt="Imagen del panel">

<!-- Bien -->
<img src="/charts/q3.png" alt="Ingresos del Q3 suben un 38% sobre el Q2, impulsados por el tramo enterprise">
<img src="/team/jane.jpg" alt="Jane Patel, CTO">
<img src="/screenshot.png" alt="Panel de MetricSpot mostrando cinco comprobaciones superadas">

Imágenes con enlace — describe el destino del enlace, no la imagen:

<a href="/docs/">
  <img src="/icons/book.svg" alt="Documentación">
</a>

Imágenes complejas (gráficos, infografías) — describe los datos y enlaza a la versión completa:

<img src="/q3-funnel.png" alt="Embudo de conversión: 1000 visitas → 230 registros → 28 de pago (2,8%).">
<a href="/q3-funnel-full.txt">Tabla de datos completa</a>

Patrones por CMS / framework.

• WordPress — Biblioteca de medios → haz clic en cualquier imagen → campo “Texto alternativo”. Audita los posts existentes desde Herramientas → Salud del sitio → Imágenes sin alt.
• Astro / Next.js Image — <Image alt={...} /> es obligatorio a nivel de tipo; TypeScript se niega a compilar sin él.
• React — añade una pequeña regla de lint (jsx-a11y/alt-text de eslint-plugin-jsx-a11y) y haz que CI falle ante alts ausentes o que parezcan nombres de archivo.

Audítalo tú. Abre la consola de DevTools y ejecuta:

[...document.images]
  .filter(i => !i.alt || /^(image|img|picture|photo|imagen|foto|\.|x)$/i.test(i.alt.trim()) || /\.(jpg|jpeg|png|gif|webp|svg)$/i.test(i.alt))
  .map(i => i.src);

Cualquier cosa que aparezca en el resultado es un alt basura.

Preguntas frecuentes

¿Toda imagen debe tener alt?

Sí, pero puede estar vacío (alt="") en las decorativas. El atributo en sí debe estar presente: lo que las herramientas marcan como violación es su ausencia.

¿Cuánto debe medir un alt?

Lo que necesite, lo más corto posible. Una frase es lo habitual; un gráfico puede necesitar dos. Olvídate del “límite” de 125 caracteres que verás citado por ahí: es un rumor sobre el búfer de los lectores de pantalla, no una restricción real.

¿Debo incluir la palabra “imagen”?

No. Los lectores de pantalla ya anuncian el rol (“gráfico”). Decir “Imagen de un perro” hace que el lector diga “gráfico, imagen de un perro”. Escribe simplemente “Cachorro golden retriever mordiendo un zapato”.