Fallo común Fallos comunes WCAG 2.2
F39Fallo del criterio de conformidad 1.1.1 debido a proporcionar una alternativa textual que no es nula (p. ej., alt="spacer" o alt="image") para imágenes que la tecnología de asistencia debería ignorar
En resumen
Este fallo se produce cuando una imagen decorativa o de relleno (un separador, un espaciador, un adorno) lleva un texto alternativo como «spacer» o «imagen» en lugar de alt vacío. Los lectores de pantalla anuncian ese texto inútil y entorpecen la lectura de quien usa tecnología de asistencia. Dé siempre alt="" a las imágenes que no aportan información, o mejor aún, inclúyalas con CSS.
Ejemplo práctico
Adornos, separadores y espaciadores cuyo texto alternativo solo describe la decoración. Ejemplo: la agenda cultural de un ayuntamiento con un separador gráfico entre eventos.
Así no: Separadores decorativos con texto alternativo
Los adornos entre eventos son decorativos, pero su alt dice «separador decorativo». El lector de pantalla interrumpe la lectura con «separador decorativo, gráfico» entre cada evento y los incluye en la lista de imágenes sin aportar nada. Para notarlo, lea la sección con NVDA o VoiceOver.
<style>
.agenda { max-width: 420px; color: #0B2239; }
.agenda h2 { margin: 0; font-size: 1.2rem; }
.agenda h3 { margin: 0 0 4px; font-size: 1.05rem; }
.agenda p { margin: 0; }
.agenda img { display: block; margin: 12px 0; }
</style>
<section class="agenda">
<h2>Agenda cultural de octubre</h2>
<img src="data:image/svg+xml,…" width="200" height="16" alt="separador decorativo">
<h3>Concierto de la Banda Municipal</h3>
<p>Sábado 25, 20:00 h. Auditorio municipal.</p>
<img src="data:image/svg+xml,…" width="200" height="16" alt="separador decorativo">
<h3>Taller de cerámica infantil</h3>
<p>Domingo 26, 11:00 h. Casa de Cultura.</p>
</section>
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Así sí: Separadores decorativos con alternativa nula
Con alt="" (vacío, sin espacios) los lectores ignoran los adornos y la lectura pasa de cada encabezado a los datos del evento sin interrupciones. Si el separador no tiene ninguna función, también puede hacerse con CSS (un borde) y quitar la imagen.
<style>
.agenda { max-width: 420px; color: #0B2239; }
.agenda h2 { margin: 0; font-size: 1.2rem; }
.agenda h3 { margin: 0 0 4px; font-size: 1.05rem; }
.agenda p { margin: 0; }
.agenda img { display: block; margin: 12px 0; }
</style>
<section class="agenda">
<h2>Agenda cultural de octubre</h2>
<img src="data:image/svg+xml,…" width="200" height="16" alt="">
<h3>Concierto de la Banda Municipal</h3>
<p>Sábado 25, 20:00 h. Auditorio municipal.</p>
<img src="data:image/svg+xml,…" width="200" height="16" alt="">
<h3>Taller de cerámica infantil</h3>
<p>Domingo 26, 11:00 h. Casa de Cultura.</p>
</section>Pruébelo aquí:
Cómo comprobarlo
Errores frecuentes en auditorías
- Espaciadores y píxeles transparentes con
alt="spacer", «espacio» o «pixel» en plantillas antiguas y boletines por correo electrónico. - Poner
alt=" "(un espacio) creyendo que equivale a vacío: no es una alternativa nula y algunos lectores lo tratan como imagen con nombre. - Rellenar el alt de imágenes decorativas con palabras clave para posicionamiento.
- Describir con detalle fotos de ambiente de una cabecera cuando el texto que las acompaña ya transmite todo el contenido.
Técnica completa: traducción al español del texto del W3C
Aplicabilidad
HTML
Descripción
Esta técnica describe una condición de fallo relativa a imágenes que las tecnologías de asistencia deberían ignorar. La alternativa textual de una imagen debe transmitir el significado de la imagen. Cuando una imagen se usa como decoración, como espaciado o con otro propósito que no forma parte del contenido significativo de la página, la imagen no tiene significado y las tecnologías de asistencia deberían ignorarla.
Proporcionar una alternativa textual nula (es decir, alt="" ) permitirá a la tecnología de asistencia ignorar la imagen y evitar un fallo de este criterio de conformidad.
Ejemplos
Imágenes decorativas que no tienen atributo alt
Se usa una imagen para crear un espacio en blanco entre contenidos, donde el espaciado en sí no tiene significado para el contenido. La imagen tiene como texto alternativo el valor "spacer" (espaciador). Esta imagen falla el criterio de conformidad porque la alternativa textual no cumple un propósito equivalente. La imagen está pensada para ignorarse, pero los lectores de pantalla anuncian su texto alternativo "spacer" y este se muestra en algunas combinaciones de colores alternativas.
<div>
Tree type: <img src="spacer.gif" width="100" height="1" alt="spacer">
Cedrus deodara
</div>
Pruebas
Procedimiento
- Identificar los elementos img que se usen como decoración, como espaciado o con otro propósito que no forme parte del contenido significativo de la página.
- Comprobar que el atributo alt de esos elementos es nulo.
Resultados esperados
- Si la comprobación n.º 2 es falsa, se da esta condición de fallo y el contenido falla el criterio de conformidad.
Cómo lo comprobamos en ADDAW
Este fallo es uno de los que buscamos en cada auditoría de accesibilidad de ADDAW: lo documentamos con capturas y el código afectado, indicamos el criterio que incumple y la técnica suficiente con la que se corrige. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica F39 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
