Técnica HTML WCAG 2.2
H67Usar 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 resumen
Esta técnica explica cómo marcar las imágenes puramente decorativas (filigranas, separadores, adornos) con alt="" y sin atributo title, para que los lectores de pantalla las omitan en lugar de anunciar un nombre de fichero sin sentido. Beneficia sobre todo a las personas ciegas o con baja visión que navegan con voz. Úsela siempre que una imagen no aporte información que el texto no dé ya.
Ejemplo práctico
Las ilustraciones que acompañan a tarjetas y cabeceras suelen ser decorativas. Ejemplo: la tarjeta de cita previa de la sede electrónica de un ayuntamiento, con una ilustración que no aporta información.
Así no: Imagen decorativa con alt vacío pero con title
La ilustración tiene alt="", pero también un atributo title. Al pasar el ratón aparece un aviso emergente innecesario y, según el navegador y el lector de pantalla, el title puede exponerse como nombre o descripción de la imagen, de modo que deja de ignorarse de forma fiable. Para notarlo, pase el puntero por la ilustración o léala con NVDA o VoiceOver.
<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>
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Así sí: Imagen decorativa con alt vacío y sin title
Se elimina el title y se mantiene alt="": la imagen queda marcada sin ambigüedad como decorativa y la tecnología de asistencia la ignora. Si la ilustración aportara información, lo correcto sería un alt descriptivo, no un title.
<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>Pruébelo aquí:
Cómo comprobarlo
Errores frecuentes en auditorías
- Plantillas o complementos que añaden automáticamente un
titlecon el nombre del fichero o el título del medio a todas las imágenes, incluidas las decorativas. - Usar
titlecomo sustituto del alt: no lo perciben quienes usan teclado o pantalla táctil y su soporte en lectores de pantalla es irregular. - Marcar como decorativas (
alt="") imágenes que sí transmiten información, como gráficos o iconos que son el único contenido de un botón. - Poner
alt=" "(con un espacio) en lugar dealt="", con lo que la imagen no se trata como decorativa en todos los navegadores.
Técnica completa: traducción al español del texto 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
titleestá ausente o vacío. - Comprobar que el atributo
altestá 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 las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. 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 H67 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.
