Cómo comprobar si una imagen tiene texto alternativo (4 métodos sencillos)

Por qué importa el texto alternativo

El texto alternativo (texto alternativo) es una breve descripción escrita que se añade a una imagen en HTML a través del atributo alt. Sirve para dos propósitos críticos: permite a los lectores de pantalla describir imágenes a los usuarios con discapacidad visual y da a los motores de búsqueda contexto para entender lo que representa una imagen.

Según la norma WCAG 1.1.1 (Contenido no textual), todas las imágenes significativas deben tener texto alternativo descriptivo para lograr la conformidad de Nivel A. La falta de texto alternativo o un texto alternativo vacío en imágenes informativas es una de las violaciones de accesibilidad más comunes que se encuentran hoy en día en la web.

Entonces, ¿cómo comprobar si una imagen tiene texto alternativo? Aquí tienes cuatro métodos fiables.

Método 1: Inspeccionar el código fuente de la página (Ver código fuente)

La forma más sencilla de comprobar el texto alternativo es ver el código HTML sin procesar de una página web:

1. Abre la página en tu navegador.
2. Haz clic derecho en cualquier lugar y selecciona Ver código fuente de la página (o pulsa Ctrl+U / Cmd+U).
3. Usa Ctrl+F / Cmd+F para buscar <img.
4. Para cada etiqueta de imagen, busca el atributo alt. Por ejemplo: <img src="foto.jpg" alt="Una mujer leyendo un libro en una biblioteca">

Si el atributo alt falta por completo, o si está presente pero vacío (alt=""), es posible que esa imagen necesite atención. Ten en cuenta que alt="" se utiliza intencionadamente para imágenes decorativas que no tienen significado; esto es válido y correcto según WCAG.

Método 2: Usar las herramientas de desarrollador del navegador (Inspeccionar elemento)

Para un enfoque más rápido y visual, utiliza las herramientas de desarrollador integradas en tu navegador:

1. Haz clic derecho directamente en la imagen que deseas comprobar.
2. Selecciona Inspeccionar o Inspeccionar elemento.
3. El panel de Herramientas de Desarrollador se abrirá con el HTML de la imagen resaltado.
4. Busca el atributo alt en la etiqueta <img> resaltada.

Este método es especialmente útil cuando quieres comprobar una imagen específica rápidamente sin tener que buscar en todo el código fuente de la página. También puedes pasar el ratón sobre el elemento de la imagen en el panel de Elementos para ver una vista previa, y el valor alt estará visible en línea.

Método 3: Usar la herramienta de accesibilidad WAVE

La Herramienta de Evaluación de Accesibilidad Web WAVE (disponible como extensión gratuita para navegador o en wave.webaim.org) proporciona una superposición visual en tu página que señala problemas de accesibilidad, incluida la falta de texto alternativo.

1. Instala la extensión de navegador WAVE (Chrome o Firefox).
2. Navega a la página que deseas comprobar.
3. Haz clic en el icono de la extensión WAVE.
4. WAVE superpondrá iconos en la página: un icono rojo marcado con un signo de exclamación indica un error de texto alternativo faltante en una imagen.
5. Haz clic en cualquier icono para obtener más detalles sobre el problema específico.

WAVE también muestra un recuento resumen de errores, lo que facilita ver de un vistazo cuántas imágenes en la página carecen de texto alternativo.

Método 4: Usar Alt Audit para una comprobación en todo el sitio

Los tres métodos anteriores son excelentes para comprobar imágenes o páginas individuales, pero ¿qué pasa si necesitas auditar todo tu sitio web a la vez? Ahí es donde entra Alt Audit.

Alt Audit escanea todo tu sitio y genera un informe completo de cada imagen a la que le falta texto alternativo, tiene un atributo alt vacío (donde no debería), o tiene un texto alternativo que puede ser demasiado corto, demasiado largo o generado automáticamente. Esto ahorra horas de trabajo manual y te proporciona una lista de acciones priorizadas para solucionar tus problemas de accesibilidad.

Con Alt Audit, puedes:

• Escanear miles de imágenes en todo tu dominio en minutos.
• Ver exactamente qué páginas e imágenes carecen de texto alternativo.
• Utilizar sugerencias impulsadas por IA para generar texto alternativo descriptivo automáticamente.
• Seguir tu progreso a lo largo del tiempo a medida que solucionas problemas.

¿Qué hace que un texto alternativo sea bueno?

Una vez que hayas identificado las imágenes a las que les falta texto alternativo, querrás escribir descripciones eficaces. Esto es lo que parece un buen texto alternativo:

• Sé descriptivo y específico: "Cachorro de golden retriever jugando en hojas de otoño" es mucho mejor que "perro" o "foto".
• Sé conciso: Intenta que no supere los 125 caracteres. Los lectores de pantalla pueden cortar el texto alternativo más largo.
• No empieces con "Imagen de" o "Foto de": Los lectores de pantalla ya anuncian que es una imagen. Simplemente describe lo que muestra.
• Refleja el contexto: La misma imagen puede necesitar un texto alternativo diferente según el contenido circundante. Un gráfico en una página de datos debe describir la tendencia de los datos, no solo "gráfico de barras".
• Usa alt vacío para imágenes decorativas: Si una imagen es puramente decorativa y no aporta información, usa alt="" para indicar a los lectores de pantalla que la omitan.

Errores comunes de texto alternativo a evitar

Al auditar tus imágenes, ten cuidado con estos errores frecuentes:

• Falta total del atributo alt: Algunos sistemas CMS antiguos o plugins de terceros pueden generar etiquetas <img> sin ningún atributo alt en absoluto.
• Nombre de archivo como texto alternativo: Un texto alternativo que diga "IMG_4823.jpg" o "banner-image-v2-final.png" no es útil para nadie.
• Relleno de palabras clave: Cargar el texto alternativo con palabras clave con fines de SEO ("mejores zapatos baratos compra zapatos online baratos") es una mala práctica de accesibilidad y puede ser penalizado por los motores de búsqueda.
• Texto alternativo idéntico en imágenes diferentes: Si varias imágenes en una página tienen el mismo texto alternativo, los usuarios de lectores de pantalla no podrán distinguirlas.

Empieza a comprobar tu texto alternativo hoy mismo

Ya seas un desarrollador, un gestor de contenidos o un especialista en SEO, saber cómo comprobar si una imagen tiene texto alternativo es una habilidad fundamental para crear sitios web accesibles y de alto rendimiento.

Para una solución rápida, completa y escalable, Alt Audit te proporciona una visibilidad completa de la cobertura de texto alternativo de tu sitio, para que puedas solucionar problemas más rápido y mantener el cumplimiento de las normas WCAG.