Técnica HTML WCAG 2.2

H67Dejar el alt vacío y sin title en las imágenes decorativas

Nombre oficial en el W3C: Usar un texto alternativo vacío y ningún atributo title en los elementos img para las imágenes que la tecnología de asistencia debe ignorar

En pocas palabras

Las imágenes que solo decoran deben llevar el atributo alt vacío (alt="") y ningún atributo title. Así los lectores de pantalla las saltan y no distraen con información inútil. Si la imagen aporta información, esta técnica no sirve: necesita un texto alternativo que la describa.

Por qué es importante

Un lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) intenta anunciar todas las imágenes. Si una ilustración de adorno no lleva alt, puede leer el nombre del fichero, como «banner-final-v3.jpg».

Con alt="" la imagen se ignora. Pero si además lleva title, algunos navegadores y lectores la vuelven a anunciar. La persona oye ruido y pierde tiempo en cada tarjeta, cabecera o separador.

Cómo se hace

Decida primero si la imagen informa o solo decora. Si se quita y no se pierde nada, es decorativa.
Ponga alt="", sin espacio entre las comillas. No quite el atributo: sin él, algunos lectores leen el nombre del fichero.
No añada title a esa imagen. Revise que el gestor de contenidos no lo ponga por su cuenta.
Si la imagen es solo un fondo o un adorno, valore cargarla desde CSS con background-image.

Ejemplo práctico

Muchas tarjetas y cabeceras llevan ilustraciones que solo decoran. Ejemplo: la tarjeta de cita previa de la sede electrónica de un ayuntamiento, con un dibujo que no aporta información.

Así no: Imagen decorativa con alt vacío, pero con title

La ilustración tiene alt="", pero también title. Al pasar el ratón sale un aviso que no hace falta. Además, según el navegador y el lector de pantalla, el title puede leerse como nombre o descripción de la imagen. Entonces la imagen ya no se ignora siempre. Para notarlo, pase el puntero por la ilustración o léala con NVDA o VoiceOver.

Captura de pantalla del ejemplo incorrecto: Imagen decorativa con alt vacío, pero con title — Así se ve el ejemplo incorrecto.

La demostración contiene, a propósito, el error de accesibilidad que se explica.

Ver el código del ejemplo incorrecto

<style>
  .cita { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; max-width: 460px; padding: 16px; border: 1px solid #8a7a9c; border-radius: 8px; }
  .cita h2 { margin: 0 0 4px; font-size: 1.15rem; color: #412c56; }
  .cita p { margin: 0; color: #0B2239; }
</style>
<div class="cita">
  <img src="data:image/svg+xml,…" width="120" height="90" alt="" title="Ilustración de un calendario">
  <div>
    <h2>Cita previa</h2>
    <p>Reserve día y hora para hacer sus trámites en la oficina municipal.</p>
  </div>
</div>

Así sí: Imagen decorativa con alt vacío y sin title

Se quita el title y se deja alt="". Así la imagen queda marcada claramente como decorativa y el lector de pantalla la ignora. Si la ilustración aportara información, lo correcto sería un alt que la describa, no un title.

Pruébelo aquí:

Ver el código del ejemplo correcto

<style>
  .cita { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; max-width: 460px; padding: 16px; border: 1px solid #8a7a9c; border-radius: 8px; }
  .cita h2 { margin: 0 0 4px; font-size: 1.15rem; color: #412c56; }
  .cita p { margin: 0; color: #0B2239; }
</style>
<div class="cita">
  <img src="data:image/svg+xml,…" width="120" height="90" alt="">
  <div>
    <h2>Cita previa</h2>
    <p>Reserve día y hora para hacer sus trámites en la oficina municipal.</p>
  </div>
</div>

Cómo comprobarlo

Ratón

Pasar el puntero por la ilustración. No debe aparecer ningún aviso emergente.

Lector de pantalla (NVDA o VoiceOver)

Leer la tarjeta con NVDA en modo exploración (flechas) o con VoiceOver (VO + flecha derecha).
Comprobar que no se anuncia la ilustración. Al pulsar G en NVDA (ir a la siguiente imagen), no debe detenerse en ella.

Debería anunciar: «encabezado nivel 2, Cita previa», sin anunciar antes ninguna imagen

Herramientas del navegador

Abrir las herramientas de desarrollo (F12) e inspeccionar cada imagen decorativa. Debe tener alt="" y no tener title (o tenerlo vacío).
Para encontrar los casos, escribir en la consola document.querySelectorAll('img[alt=""][title]:not([title=""])').

Validación automática

axe DevTools y Lighthouse no marcan este caso: la imagen tiene alt y cumple la regla image-alt.
WAVE solo la señala como imagen con alt vacío, a modo informativo, no como error. El title hay que revisarlo a mano o con el selector anterior. Ninguna herramienta decide si la imagen es de verdad decorativa.

Errores frecuentes en auditorías

Plantillas o complementos que añaden solos un title a todas las imágenes, con el nombre del fichero o del medio. También a las decorativas.
Usar title en lugar del alt. Quien usa teclado o pantalla táctil no lo ve, y los lectores de pantalla no siempre lo leen.
Marcar como decorativas (alt="") imágenes que sí informan, como gráficos o iconos que son lo único que hay dentro de un botón.
Poner alt=" " (con un espacio) en vez de alt="". Así la imagen no se trata como decorativa en todos los navegadores.

Para saber más, en nuestro blog

Guía para crear correos electrónicos accesibles
Este artículo explica como hacer un correo electrónico más accesible e inclusivo para todo tipo de personas y como beneficia a todos el hacerlo.
Cómo crear un buen texto alternativo
Cuando el texto alternativo se coloca bien, mejora tanto la accesibilidad del sitio web como el SEO de la pagina. ¡Conoce las claves para hacerlo…
Árbol de decisión para escribir un texto alternativo
Un árbol de decisión es una sencilla manera de saber cuándo hay que escribir un texto alternativo en una imagen y cuándo no.

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 H67 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

Documentos HTML que cargan imágenes.

Descripción

El propósito de esta técnica es mostrar cómo pueden marcarse las imágenes para que la tecnología de asistencia pueda ignorarlas.

Si no se utiliza el atributo title y el texto del alt se establece como nulo (es decir, alt=""), se indica a la tecnología de asistencia que la imagen puede ignorarse sin problema.

Tener un atributo alt «nulo» no es lo mismo que no tener ningún atributo alt.

Ejemplos

Insertar una imagen decorativa en una página web

<img alt="" src="squiggle.gif" height="20" width="20">

Pruebas

Procedimiento

Para cada imagen que deba ignorarse:

Comprobar que el atributo title está ausente o vacío.
Comprobar que el atributo alt está presente y vacío.

Resultados esperados

Las comprobaciones n.º 1 y n.º 2 son verdaderas.

Recursos

HTML - requirements for providing text to act as an alternative for images (requisitos para proporcionar un texto que sirva de alternativa a las imágenes).
HTML - el atributo title.
HTML - el elemento img.

Cómo lo comprobamos en ADDAW

En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.

Solicitar una auditoría

Basado en la técnica H67 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.