Saltar al contenido

Comprobador de texto alt de imágenes

Respuesta breve

Encuentra imágenes sin texto alt y comprueba los atributos alt existentes.

Lo que no hace: Comprueba si el texto alternativo existe, está vacío o es un nombre de archivo, no si describe bien la imagen, y no incluye imágenes añadidas por scripts ni fondos CSS.

Gratis · Sin registro · Se ejecuta en tu navegador
100% en tu navegador — tu contenido nunca sale de tu dispositivo.

Qué hace

Escanea cada `<img>` de la página y valida la presencia de texto alternativo, el marcado de imágenes decorativas mediante `alt=""` vacío, y los patrones de alt igual al nombre de archivo (texto alternativo que solo repite el nombre del archivo de imagen). Devuelve una lista de las imágenes que necesitan atención.

Por qué importa

El texto alternativo es cómo los usuarios de lectores de pantalla saben qué muestra una imagen, y el criterio WCAG 1.1.1 exige una alternativa textual para cada imagen significativa. Google también usa el texto alternativo, junto con el contenido que rodea a la imagen, para entenderla en Google Imágenes. Un texto alternativo ausente hace fallar al primer grupo y deja al segundo con menos información.

Cómo funciona

  1. Introduce la URL de una página o pega su HTML

  2. Leemos cada elemento `<img>` y su atributo alt del HTML

  3. Aplicamos reglas de calidad: alt ausente, alt vacío (decorativo) y alt igual al nombre de archivo

  4. Devolvemos la cobertura de texto alternativo y una lista de las imágenes sin un alt adecuado

Ejemplo de entrada y salida

ENTRADA
url: https://web.dev/articles/vitals
SALIDA
imágenes: 9
  con alt: 8
  alt vacío (decorativas): 1
  sin alt: 0                                OK
  alt = nombre de archivo: 0                OK

Cobertura: 100 %

Cómo leer el resultado

Imágenes (9 en el ejemplo)
Cada elemento <img> del HTML que envía tu servidor. Las imágenes de fondo CSS, dibujadas con SVG o añadidas después por un script no se cuentan.
Sin alt (0)
Imágenes sin ningún atributo alt. Los lectores de pantalla suelen leer entonces el nombre del archivo o decir solo «imagen», y no se cumple WCAG 1.1.1. Es el número que baja la puntuación.
Alt vacío (1)
Imágenes con alt="". Es correcto para una imagen puramente decorativa e incorrecto para una que aporta información. La herramienta no puede distinguirlas, así que muestra el número sin veredicto: revisa cada una.
El alt es solo el nombre del archivo
Un texto alternativo que repite el nombre del archivo, como «hero-banner-2» o «IMG_0423», no le dice nada a nadie. Recibe una advertencia aunque el atributo exista.
Cobertura (100 %)
La proporción de imágenes con atributo alt, vacío o no. El 100 % significa que no falta ninguno; no significa que cada texto sea bueno, porque la herramienta no puede juzgar si un alt describe su imagen.
Imágenes que corregir
Bajo las cifras, el informe lista hasta ocho imágenes sin alt por nombre de archivo para que las encuentres en tu plantilla o mediateca.

Quién lo usa

  • Gestor de comercio electrónico

    Revisa las páginas de producto en busca de imágenes sin texto alternativo o con el nombre del archivo como alt, un valor por defecto habitual en catálogos.

  • Auditor de accesibilidad

    Revisa la cobertura de texto alternativo del criterio WCAG 1.1.1 página por página y enumera cada imagen sin atributo alt.

  • Editor de contenidos

    Revisa cada página que publicas para detectar imágenes subidas sin texto alternativo antes de que se acumulen.

Problemas frecuentes y cómo solucionarlos

  1. Imágenes de contenido sin alt

    Escribe lo que muestra la imagen que importa en esta página: «Zapatilla de trail roja, vista lateral» en una ficha de producto, la tendencia de un gráfico en un informe. Limítate a una frase; las descripciones largas van en el texto o en un pie de foto.

    <img src="/signups.png" alt="Bar chart: sign-ups doubled from March to June">
<img src="/divider.svg" alt="">

  2. El CMS añade imágenes sin alt

    La mayoría de los gestores de contenido tienen un campo alt en la mediateca: hazlo obligatorio para los redactores e imprímelo en la plantilla en lugar de omitir el atributo. Para las imágenes decorativas, haz que la plantilla escriba alt="" de forma explícita.

  3. Iconos y logotipos

    Un icono junto a una etiqueta de texto es decorativo: alt="". Un icono que es el único contenido de un botón o enlace necesita un alt que nombre la acción («Buscar», «Cerrar menú»). Un logotipo que lleva al inicio necesita el nombre de la organización, no «logo».

    <a href="/"><img src="/logo.svg" alt="Example Ltd – home"></a>
<button type="button"><img src="/icons/search.svg" alt="Search"></button>
<img src="/icons/check.svg" alt=""> In stock

  4. Alt lleno de palabras clave

    Las directrices de Google para imágenes advierten contra llenar los atributos alt de palabras clave. Describe la imagen; menciona el tema una vez, de forma natural, cuando de verdad aparece en ella.

  5. Gráficos e imágenes complejas

    Da al alt un resumen breve, como «Gráfico de barras: los registros se duplicaron de marzo a junio», y pon las cifras completas en el texto de la página o en una tabla al lado, para que todos accedan a ellas.

Preguntas frecuentes

¿Cuándo debe estar vacío el texto alternativo?
Para imágenes decorativas que no aportan valor informativo (patrones de fondo, separadores). Usa `alt=""` para que los lectores de pantalla las omitan. Nunca omitas el atributo por completo.
¿Qué hace bueno a un texto alternativo?
Una frase breve que describe lo que muestra la imagen y por qué está ahí. Evita "imagen de" o "foto de", y usa una palabra clave solo donde describa realmente la imagen.
¿Cómo usa Google el texto alternativo?
Google usa el texto alternativo, junto con el contenido de la página, para entender qué muestra una imagen, lo que le ayuda a mostrarla en Google Imágenes. Los asistentes de IA que leen una página pueden usarlo del mismo modo.
¿Qué pasa con los pies de foto?
Los pies de foto (`<figcaption>`) complementan al texto alternativo pero no lo sustituyen. Ambos deberían describir la imagen; el alt es para lectores de pantalla, el pie de foto es para usuarios videntes.

Fuentes

La documentación en la que se basan esta herramienta y las explicaciones de esta página.

Herramientas gratuitas sobre este tema

Guías sobre este tema

Datos de estudio sobre este tema

Herramientas relacionadas en Análisis SEO

Ver todas las herramientas de Análisis SEO