Texto alternativo de imágenes

Qué comprueba esta auditoría

Cuenta los elementos <img> y cuántos de ellos tienen un atributo alt no vacío. Informa del ratio.

Por qué importa

El alt sirve a tres públicos:

• Los lectores de pantalla leen el alt en voz alta a usuarios ciegos o con baja visión. Sin él, el usuario oye “imagen” o el nombre del archivo: inútil. Además, es obligatorio en la UE por la Ley de Accesibilidad desde junio de 2025.
• Google Imágenes clasifica las imágenes en parte por el alt. Un alt bien escrito es una de las señales más fuertes para la visibilidad en búsqueda de imágenes.
• Los rastreadores de IA todavía no entienden de forma fiable el contenido visual. Dependen del alt para saber qué muestra la imagen.

Hay un cuarto: cuando una imagen no carga, el alt es lo que ve el usuario en lugar del icono de imagen rota.

Cómo solucionarlo

Añade un alt descriptivo a cada imagen significativa:

<img src="/hero.webp" alt="Informe de auditoría de MetricSpot mostrando 87/100 con desglose por módulo" />

Reglas:

• Describe lo que hay en la imagen, no “imagen de”. Los lectores de pantalla ya anuncian “imagen”.
• Sé específico. alt="informe" no sirve. alt="Informe PDF de MetricSpot con puntuación 87" sí.
• Olvídate del keyword stuffing. No escribas alt="auditoría SEO herramienta SEO informe SEO". Google penaliza esto y los lectores de pantalla lo odian.
• Para imágenes decorativas, usa alt="" (vacío, no ausente). Los lectores de pantalla saltan los alt vacíos. Aplica a patrones de fondo, iconos separadores, etc.

Ayudas por framework:

• <Image> de Next.js: alt es un prop obligatorio.
• MDX/Markdown: el alt va entre los corchetes: ![este es el alt](imagen.jpg).

Preguntas frecuentes

¿Y los logos?

Los logos que también son enlace (por ejemplo, el logo del header enlazando a la home) deberían describir el destino: alt="MetricSpot inicio" o alt="MetricSpot". Los logos sueltos en un footer pueden usar alt="Logo de MetricSpot".

¿Debo añadir alt a las imágenes de fondo en CSS?

Las imágenes de fondo en CSS no son accesibles para los lectores de pantalla. Si la imagen transmite información, usa un <img> con alt. Si es puramente decorativa, el fondo en CSS está bien.

¿Sirve el atributo title?

No. title aparece como tooltip al pasar el cursor, pero la mayoría de los lectores de pantalla y muchos dispositivos táctiles lo ignoran. Usa siempre alt.