Por qué falta el texto alternativo
El texto alternativo faltante rara vez es deliberado. Las causas habituales:
- Subidas del CMS sin campo obligatorio. La mayoría de los editores de contenido permiten publicar una imagen sin pedir nunca el texto alternativo, así que este queda vacío por defecto sin avisar.
- Marcado copiado y pegado. Una etiqueta
<img>copiada de otra parte del sitio (o de un ejemplo de una librería de componentes) arrastra el texto alternativo que tuviera el original, o su ausencia. - Componentes de icono tratados como decoración por defecto. Las librerías de iconos SVG y las fuentes de iconos a menudo no incluyen un nombre accesible a menos que lo añada explícitamente, y es fácil asumir que el componente que lo rodea ya se encarga de ello cuando no es así.
- Imágenes descriptivas marcadas por error como decorativas, o al revés. Invertir esta distinción es casi tan frecuente como olvidarla por completo.
Cómo identificar cada caso faltante
Esta es una de las pocas verificaciones que Scanverra puntúa directamente en lugar de limitarse a mostrarla. Durante un escaneo de Prueba de navegador, Scanverra ejecuta Array.from(document.querySelectorAll("img")).filter((img) => !img.alt) contra su página renderizada y reporta cada coincidencia como un problema distinto de "Atributo alt faltante", listando hasta los primeros 10 por escaneo junto con el origen de la imagen para que pueda encontrarla rápidamente. Una auditoría real independiente de Lighthouse image-alt también contribuye a su puntuación de accesibilidad, así que un problema de alt faltante aparece en dos sitios, no como una sola suposición.
Cómo solucionarlo
1. Escriba una descripción real para las imágenes con significado
Describa lo que la imagen transmite en su contexto, no lo que literalmente es: omita "imagen de" o "foto de", ya que los lectores de pantalla ya la anuncian como una imagen:
1<img
2 src="/keyboard-side-profile.webp"
3 alt="Mechanical keyboard with low-profile keys and RGB backlighting"
4 width={480}
5 height={320}
6/>2. Marque las imágenes puramente decorativas como vacías, no como faltantes
1<img src="/divider-flourish.svg" alt="" role="presentation" />3. Dé a los iconos funcionales un nombre accesible para la acción que realizan
1<button aria-label="Search">
2 <SearchIcon aria-hidden="true" />
3</button>4. No rellene el texto alternativo con palabras clave
Un texto alternativo que suena como una cadena de palabras clave de SEO en lugar de una descripción real falla tanto en su propósito de accesibilidad (no le sirve de nada a un usuario de lector de pantalla) como, en la práctica, no aporta nada a las clasificaciones: escríbalo para la persona que no puede ver la imagen.
Cómo detecta Scanverra los problemas de texto alternativo
La Prueba de navegador de Scanverra inspecciona genuinamente cada elemento <img> renderizado en la página y puntúa los hallazgos de alt faltante como problemas de accesibilidad reales, limitados a los primeros 10 por escaneo: no es un campo meramente informativo, se contabiliza contra su puntuación.