Fallo común WCAG 2.2
F30Textos alternativos que no sustituyen a la imagen
Nombre oficial en el W3C: Fallo de los criterios de conformidad 1.1.1 y 1.2.1 debido a usar alternativas textuales que no son alternativas (p. ej., nombres de fichero o texto de relleno)
En pocas palabras
Este error se da cuando una imagen tiene texto alternativo, pero ese texto no sirve. Ejemplos: el nombre del fichero, «imagen», «foto 1» o un espacio en blanco. Un texto alternativo debe poder ocupar el lugar de la imagen sin que se pierda información ni función.
Por qué es importante
Las personas ciegas usan un lector de pantalla (programa que lee en voz alta lo que hay en la pantalla). Para ellas, el texto alternativo es la imagen.
- Si oyen «IMG_2045.jpg» o «imagen», no saben qué muestra.
- Si la imagen es un enlace o un botón, no saben adónde lleva ni qué hace.
- Las herramientas automáticas no lo detectan, porque el atributo
altexiste.
Cómo evitarlo
- Piense qué aporta la imagen en ese lugar y escriba eso en el
alt. - En gráficos, dé los datos o la conclusión, no solo el título.
- En enlaces y botones con imagen, describa el destino o la acción: «Descargar el informe (PDF)».
- Si la imagen es solo decoración, deje el
alt=""vacío, sin espacio. Así el lector la ignora. - Revise el gestor de contenidos para que no rellene el
altcon el nombre del fichero.
Ejemplo práctico
El atributo alt existe, pero no sirve como alternativa. Es típico de los gestores de contenidos que lo rellenan con el nombre del fichero. Ejemplo: una noticia municipal con un gráfico y un enlace a un informe en PDF.
Así no: Nombre de fichero y texto genérico como alternativa
El alt del gráfico es el nombre del fichero, y el del icono del enlace es «icono». El lector anuncia «grafico_vidrio_2025.png, gráfico» y «Descargar el informe anual icono, enlace». No da los datos del gráfico ni dice que el enlace descarga un PDF. Las herramientas automáticas no lo marcan, porque el alt existe.
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Ver el código del ejemplo incorrecto
<style>
.noticia { max-width: 420px; color: #0B2239; }
.noticia h2 { font-size: 1.2rem; margin: 0 0 8px; }
.noticia a { color: #412c56; }
.noticia a:focus-visible { outline: 3px solid #412c56; outline-offset: 2px; }
.noticia a img { vertical-align: middle; }
</style>
<article class="noticia">
<h2>El reciclaje de vidrio sube un 12 % en 2025</h2>
<img src="data:image/svg+xml,…" width="280" height="150" alt="grafico_vidrio_2025.png">
<p>
<a href="#">Descargar el informe anual <img src="data:image/svg+xml,…" width="20" height="24" alt="icono"></a>
</p>
</article>Así sí: Alternativas que sustituyen a la imagen
El alt del gráfico recoge sus datos, y el del icono indica el formato del documento. Ahora cada texto alternativo sustituye a su imagen sin perder información. Es lo que exige el criterio 1.1.1.
Pruébelo aquí:
Ver el código del ejemplo correcto
<style>
.noticia { max-width: 420px; color: #0B2239; }
.noticia h2 { font-size: 1.2rem; margin: 0 0 8px; }
.noticia a { color: #412c56; }
.noticia a:focus-visible { outline: 3px solid #412c56; outline-offset: 2px; }
.noticia a img { vertical-align: middle; }
</style>
<article class="noticia">
<h2>El reciclaje de vidrio sube un 12 % en 2025</h2>
<img src="data:image/svg+xml,…" width="280" height="150" alt="Vidrio recogido: 366 toneladas en 2024 y 410 toneladas en 2025">
<p>
<a href="#">Descargar el informe anual <img src="data:image/svg+xml,…" width="20" height="24" alt="(PDF)"></a>
</p>
</article>Cómo comprobarlo
Errores frecuentes en auditorías
- Gestores de contenidos que rellenan el alt con el nombre del fichero subido (IMG_2045.jpg, banner-home-v3.png).
- Textos genéricos como «imagen», «foto», «icono» o «logo», puestos solo para que la herramienta automática no dé error.
- Gráficos e infografías cuyo alt es solo el título («Gráfico de reciclaje»), sin los datos ni la conclusión.
- Galerías con alternativas numeradas («Foto 1», «Foto 2») que no dicen qué muestra cada imagen.
Para saber más, en nuestro blog
-
Tips de accesibilidad en las redes sociales para 2023Explora consejos y estrategias de diseño inclusivo para optimizar la accesibilidad en redes sociales durante 2023
-
Accesibilidad vs emojis¿Los emojis favorecen a la accesibilidad? ¿O no lo hacen? Sí, pero no de cualquier manera, aquí recogemos algunas formas correctas y consejos.
-
Cómo crear un buen texto alternativoCuando el texto alternativo se coloca bien, mejora tanto la accesibilidad del sitio web como el SEO de la pagina. ¡Conoce las claves para hacerlo…
Ver el texto completo del W3C (traducción al español)
Esta es una traducción no oficial al español de la técnica F30 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.
Aplicabilidad
Se aplica a todas las tecnologías.
Descripción
Esta técnica describe una condición de fallo para todas las técnicas que implican alternativas textuales. Si el texto de la «alternativa textual» no puede usarse en lugar del contenido no textual sin perder información o funcionalidad, entonces falla, porque en realidad no es una alternativa del contenido no textual.
Ejemplos
Algunos ejemplos de textos que no son alternativas textuales:
- textos de relleno como " " (un espacio), "spacer" (separador), "image" (imagen) o "picture" (fotografía), etc., colocados en el lugar de la «alternativa textual» de imágenes o fotografías.
- referencias de programación que no transmiten la información ni la función del contenido no textual, como "picture 1", "picture 2" o "0001", "0002" o "Intro#1", "Intro#2".
- nombres de fichero que no son alternativas textuales válidas por sí mismos, como "Oct.jpg", "Chart.jpg" o "sales\\oct\\top3.jpg"
Pruebas
Procedimiento
- Comprobar cada alternativa textual para ver si en realidad no es una alternativa textual del contenido no textual.
Resultados esperados
- Si la comprobación n.º 1 es verdadera, se da esta condición de fallo y el contenido falla el criterio de conformidad.
Cómo lo comprobamos en ADDAW
Este error es uno de los que buscamos en cada auditoría de ADDAW. Se lo entregamos con capturas y la forma de corregirlo.
Basado en la técnica F30 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.