Fallo común WCAG 2.2
F39Imágenes decorativas con un texto alternativo que sobra
Nombre oficial en el W3C: Fallo 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 pocas palabras
El error es dar texto alternativo a una imagen que solo decora: un separador, un adorno o un espaciador con alt="separador" o alt="spacer". El lector de pantalla lee ese texto, que no aporta nada e interrumpe la lectura. Las imágenes decorativas deben llevar el alt vacío: alt="".
Por qué es importante
El texto alternativo sirve para contar lo que aporta una imagen. Si la imagen no aporta nada, cualquier texto es ruido.
- Quien usa un lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) oye «separador decorativo, gráfico» entre cada noticia o evento.
- Esas imágenes aparecen también en la lista de imágenes del lector. La persona pierde tiempo revisándolas.
- Algunas personas con baja visión usan modos de alto contraste o de solo texto. En ellos, el texto alternativo puede verse en pantalla y estorbar.
Cómo evitarlo
- Pregúntese qué se pierde si la imagen desaparece. Si no se pierde nada, es decorativa.
- Ponga a las imágenes decorativas
alt="", vacío y sin espacios dentro. - No escriba en ellas «imagen», «espacio», «spacer», «adorno» ni palabras clave para buscadores.
- Mejor aún: haga los separadores, fondos y espacios con CSS (bordes, márgenes o
background-image). Así no hay imagen que describir. - Si una foto de ambiente solo acompaña a un texto que ya lo dice todo, trátela también como decorativa.
Ejemplo práctico
Ocurre con 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 corta la lectura con «separador decorativo, gráfico» entre cada evento. Además, los incluye en la lista de imágenes sin aportar nada. Para notarlo, lea la sección con NVDA o VoiceOver.
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Ver el código del ejemplo incorrecto
<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>Así sí: Separadores decorativos con alt vacío
Con alt="" (vacío, sin espacios) los lectores se saltan los adornos. La lectura pasa de cada encabezado a los datos del evento sin cortes. Si el separador no tiene ninguna función, también puede hacerse con CSS (un borde) y quitar la imagen.
Pruébelo aquí:
Ver el código del ejemplo correcto
<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>Cómo comprobarlo
Errores frecuentes en auditorías
- Espaciadores y píxeles transparentes con
alt="spacer", «espacio» o «pixel». Son típicos de plantillas antiguas y de boletines por correo. - Poner
alt=" "(un espacio) creyendo que es lo mismo que vacío. No es una alternativa nula, y algunos lectores lo tratan como una imagen con nombre. - Rellenar el alt de imágenes decorativas con palabras clave para buscadores.
- Describir con detalle las fotos de ambiente de una cabecera cuando el texto de al lado ya lo cuenta todo.
Para saber más, en nuestro blog
-
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 F39 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
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 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 F39 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.