Comprobador de texto alternativo de imágenes
Cada imagen, juzgada con palabras
Este comprobador de texto alternativo lee cada imagen de una página publicada y dice, una por una, si su alt ayuda a quien escucha. Además, marca el alt ausente, los nombres de archivo y las palabras genéricas, y distingue las imágenes enlazadas de la decoración.
- GratisPrecio
- OchoComprobaciones
- NingunoRegistro
- NadaSe guarda
Comprobador de texto alternativo de imágenes
Cada imagen de una página, el texto alternativo que lleva y el que le falta
- Imágenes
- 0
- Sin alt
- 0
- Marcadas como decorativas
- 0
- Por mejorar
- 0
- Ya correctas
- 0
| # | Imagen | Texto alternativo | Veredicto | Qué hacer |
|---|---|---|---|---|
| Pega una dirección arriba y las imágenes aparecerán aquí. | ||||
Listo. Pega cualquier dirección pública y este servidor lee sus imágenes una vez.
Para qué existe el atributo alt de una imagen
El texto alternativo es la frase que sustituye a una imagen cuando no se puede ver.
El lector de pantalla lo pronuncia para quien no ve la imagen. Un navegador lo muestra cuando el archivo no carga. Además, los buscadores también lo leen, porque es la descripción más clara de lo que muestra una imagen.
Así que la pregunta nunca es solo si una imagen tiene texto alternativo. Lo que importa es si ese texto le serviría a alguien que no ve la foto.
Esa es la pregunta que esta herramienta hace a cada imagen y a cada etiqueta alt de la página, y responde con palabras claras en lugar de un simple aprobado o suspenso.
Un alt que falta y un alt en blanco son cosas distintas
Si falta el alt, es un error. Como no hay nada que leer, muchos lectores de pantalla recurren al nombre del archivo y leen algo como "IMG guion bajo 4031 punto jpg".
Un alt vacío, escrito alt="", es en cambio una decisión. Indica a la tecnología de apoyo que salte la imagen, lo que la guía del W3C sobre imágenes decorativas recomienda para un separador, una forma de fondo o un icono junto a una palabra que ya dice lo mismo.
Por eso este comprobador cuenta los dos por separado. El primero hay que corregirlo, mientras que el segundo casi nunca necesita nada.
Por qué importa más una imagen enlazada
Cuando una imagen es lo único que hay dentro de un enlace, su texto alternativo se convierte en el nombre de ese enlace.
Sin él, el enlace no tiene nombre, así que un lector de pantalla anuncia la dirección o simplemente "enlace". Luego, quien recorre la página con el tabulador encuentra una fila de paradas idénticas y sin nombre.
Por esa razón estas filas aparecen primero. Además, el texto alternativo de una imagen enlazada debe describir adónde lleva el enlace, no cómo es la imagen.
Texto alternativo que aprueba y aun así falla
La mayoría de validadores se quedan en "el atributo existe". Como resultado, alt="DSC00412.jpg", alt="image" y alt="banner" aprueban, aunque ninguno le dice nada a quien escucha.
Este comprobador lee las palabras. Detecta nombres de archivo y de cámara, palabras genéricas sueltas y comienzos como "imagen de", que el lector de pantalla ya dice antes del texto.
También nota el mismo texto alternativo repetido en tres o más imágenes distintas, ya que suele ser un valor por defecto del tema y no una descripción.
Copias dentro de noscript
Los plugins de carga diferida suelen dejar una segunda copia de cada imagen dentro de una etiqueta noscript para los rastreadores. Por eso el comprobador lista esas copias y luego las deja fuera de los recuentos, así ninguna imagen se juzga dos veces.
Unos 125 caracteres como máximo para el texto alternativo
Una frase suele bastar. Muchos lectores de pantalla cortan, o al menos se vuelven difíciles de seguir, a partir de unos 125 caracteres.
Si una imagen necesita más explicación, como un gráfico o un diagrama, pon el detalle en un pie de foto visible o en el texto de al lado. Luego mantén el alt corto y deja que remita allí.
Los límites de esta revisión automática
Lee la página tal como la envía el servidor, que es también lo primero que lee un rastreador. En consecuencia, las imágenes que un script añade después, y las definidas como fondos CSS, no aparecen aquí.
De todas formas, las imágenes de fondo CSS no pueden llevar texto alternativo. Por tanto, si una de ellas transmite significado, debería ir en una etiqueta img.
En esta página
- La herramienta
- Para qué existe el atributo alt de una imagen
- Cómo usar el comprobador de texto alternativo
- Qué hace diferente a este comprobador de alt
- Pautas para redactar un buen texto alternativo
- Seis errores de texto alternativo que aprueban los validadores
- Dudas habituales sobre el texto alternativo
- Herramientas para revisar imágenes
Sigue leyendo
Cómo usar el comprobador de texto alternativo
Una dirección entra, sale una fila por imagen, con los problemas primero.
- 1
Pon la URL que quieres revisar
Sirve cualquier página pública. También vale un dominio solo, porque se añade https:// por ti.
- 2
Pulsa revisar
Este servidor lee la página una vez y devuelve cada imagen y marco que contiene. La página en sí nunca se muestra aquí.
- 3
Empieza por las filas rojas
Primero aparecen las imágenes enlazadas sin alt, porque esos enlaces no tienen nombre. Después vienen las imágenes sin ningún alt.
- 4
Usa las palabras sugeridas
Cuando el nombre del archivo es legible, el comprobador lo convierte en una frase de partida. Luego edítala hasta convertirla en una descripción real antes de usarla.
Qué hace diferente a este comprobador de alt
La mayoría de comprobadores cuentan atributos. Este, en cambio, lee lo que dicen.
Ocho veredictos, no dos
Ausente, enlazada, nombre de archivo, genérica, redundante, demasiado larga, repetida y decorativa. Además, cada uno viene con su propio motivo.
Primero las imágenes enlazadas
Una imagen que es todo el enlace decide el nombre de ese enlace, así que esos fallos van arriba de la lista.
Una corrección en cada fila
Cada problema llega con el siguiente paso y, a menudo, con una frase de partida creada a partir del nombre del archivo.
La decoración se respeta
alt="" y aria-hidden se cuentan como decisiones, no como fallos, porque en un separador son la respuesta correcta.
También revisa los marcos
Un vídeo o un mapa incrustado se nombra con su atributo title, así que los marcos sin él también se marcan.
Exporta con un clic
Copia el informe o descárgalo en CSV, y luego pásalo a quien edite la página.
Pautas para redactar un buen texto alternativo
Ocho hábitos que convierten un atributo en una descripción.
- Cuenta para qué está la imagen, no cómo se ve. Pregúntate qué aporta la imagen a la página. Una foto de producto necesita el producto; en cambio, un gráfico necesita su conclusión.
- Nombra el destino en una imagen enlazada. Si la imagen es el enlace, el texto alternativo es el texto del enlace. Así que "Ver nuestros precios" gana a "Flecha azul".
- Omite "imagen de". El lector de pantalla dice por su cuenta que hay una imagen. Por eso conviene empezar directamente por el tema.
- Para un adorno o un separador, deja el alt vacío: alt="". Los separadores, adornos y formas de fondo deben saltarse, y un alt vacío es la forma de decirlo.
- Limítalo a una frase. A partir de unos 125 caracteres, el detalle va en un pie de foto, donde todo el mundo puede leerlo.
- Si la imagen lleva letras, cópialas en el alt. Si un banner dice "Rebajas de verano, 30 por ciento de descuento", el texto alternativo también debe decirlo; si no, la oferta es invisible para quien escucha.
- Nada de rellenar el alt con palabras clave. El texto alternativo escrito para buscadores suena mal en voz alta. Además, una descripción natural ya lleva las palabras que importan.
- Vuelve a revisar tras un rediseño. Los temas y los maquetadores borran el texto alternativo más a menudo de lo que se cree, así que repite la revisión cada vez que cambie la plantilla.
Seis errores de texto alternativo que aprueban los validadores
Todos tienen atributo alt y, aun así, todos dejan a quien escucha adivinando.
Dejar el nombre que puso la cámara
alt="IMG_4031" es lo que deja una subida. Aprueba cualquier validador y no describe nada.
Una palabra genérica
"Logo", "imagen" y "banner" nombran una categoría. En cambio, di de quién es el logo o qué ofrece el banner.
Repetir el mismo alt en cada imagen
Una galería de veinte fotos llamadas todas "Nuestro trabajo" le da a quien escucha un solo dato veinte veces.
Un párrafo en el atributo
Un texto alternativo largo no se puede hojear ni pausar. Por eso conviene poner el detalle en un pie de foto y dejar el alt corto.
Un alt vacío en un enlace
alt="" en lo único que hay dentro de un enlace deja el enlace sin nombre.
Escribir «zapatos baratos zapatos rojos» en el alt
Una lista de términos de búsqueda suena a spam al leerse en voz alta, y además no ayuda a nadie a encontrar la página.
Dudas habituales sobre el texto alternativo
¿Qué es exactamente el atributo alt?
Es el texto del atributo alt de una imagen. Lo pronuncia el lector de pantalla, aparece si la imagen no carga y ayuda a Google a saber qué muestra.
¿Hace falta alt hasta en las imágenes decorativas?
Cada etiqueta img debe llevar su alt, aunque vaya vacío. Sin embargo, una imagen puramente decorativa debe llevarlo vacío, alt="", para que los lectores de pantalla la salten.
¿Usa Google Imágenes el texto alternativo para posicionar?
Sí. Es la principal vía por la que un buscador sabe qué muestra una imagen, algo clave para la búsqueda de imágenes. Aun así, escríbelo primero para personas, porque eso también es lo que mejor lee un rastreador.
¿Cuántos caracteres conviene poner en el texto alternativo?
Una frase corta, idealmente de menos de 125 caracteres. Por eso las explicaciones largas van en un pie de foto visible.
¿En qué se distinguen los atributos alt y title de una imagen?
El alt sustituye a la imagen para quien no puede verla. En cambio, title es una información emergente opcional que la mayoría de lectores de pantalla ignora, así que no puede reemplazar al texto alternativo.
¿Por qué el comprobador marca mi logotipo?
Normalmente porque el texto alternativo solo dice "logo". Di de quién es y, si enlaza a la portada, dilo, por ejemplo "Inicio de Denwix".
¿Por qué faltan algunas imágenes en la lista?
El comprobador lee la página tal como la envía el servidor. Por tanto, las imágenes que añade después un script, o las definidas como fondos CSS, no están en ese código.
¿Qué son las copias en noscript?
Muchos plugins de carga diferida colocan una segunda copia de cada imagen dentro de noscript para los rastreadores. Aparecen en la lista, aunque quedan fuera de los recuentos.
¿Puedo revisar una página que exige iniciar sesión?
No. La página tiene que ser pública, porque este servidor la lee como la leería un visitante sin cuenta.
¿Se guarda en algún sitio la página que reviso?
No. La dirección sirve para una sola lectura y luego desaparece, y este servidor no guarda copia ni de la página ni del informe.
Herramientas para revisar imágenes
El texto alternativo es solo una pregunta sobre una imagen. Aquí van las respuestas al resto de dudas.
Comprobador de carga diferida
Qué imágenes cargan demasiado pronto y cuáles esperan demasiado.
Abrir herramienta →Mide ancho, alto y peso de una imagen
Ancho, alto y peso del archivo, medidos en tu navegador.
Abrir herramienta →Conversor de imágenes
Convierte imágenes pesadas a WebP o AVIF sin subirlas.
Abrir herramienta →
¿Pasamos ya tus imágenes por la revisión?
Pega una dirección y lee un veredicto para cada imagen. El comprobador de texto alternativo es gratis, no necesita cuenta y no guarda ningún registro de la página.