Técnica HTML WCAG 2.2
H37Usar atributos alt en los elementos img
En resumen
Esta técnica pide que toda imagen insertada con el elemento img que transmita significado tenga un atributo alt con una alternativa textual corta que cumpla la misma función que la imagen. Si la imagen contiene palabras importantes, el texto alternativo debe incluirlas. Beneficia a las personas que usan lectores de pantalla o navegan sin imágenes, y es la base para cumplir el criterio 1.1.1 Contenido no textual.
Ejemplo práctico
Los banners enlazados con texto incrustado son el caso más habitual en el que el alt debe recoger las palabras de la imagen. Ejemplo: un banner de la portada de un ayuntamiento que lleva a la cita previa.
Así no: Banner enlazado cuyo alt no incluye el texto de la imagen
La imagen enlazada contiene texto, pero el alt la describe en lugar de reproducir sus palabras. El lector de pantalla anuncia «Imagen promocional del Ayuntamiento, enlace», así que no se sabe que el enlace lleva a pedir cita previa. Para notarlo, recorra la demo con Tab con NVDA o VoiceOver activado.
<style>
.promo h2 { font-size: 1.2rem; margin: 0 0 8px; color: #0B2239; }
.promo a { display: inline-block; border-radius: 8px; }
.promo a:focus-visible { outline: 3px solid #0B2239; outline-offset: 3px; }
.promo img { display: block; max-width: 100%; height: auto; }
</style>
<aside class="promo">
<h2>Servicios en línea</h2>
<a href="#">
<img src="data:image/svg+xml,…" width="320" height="90" alt="Imagen promocional del Ayuntamiento">
</a>
</aside>
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Así sí: Banner enlazado con las palabras de la imagen en el alt
El alt reproduce el texto del banner, que además indica el destino del enlace. El texto alternativo cumple en la página la misma función que la imagen y el enlace tiene un nombre que se entiende fuera de contexto.
<style>
.promo h2 { font-size: 1.2rem; margin: 0 0 8px; color: #0B2239; }
.promo a { display: inline-block; border-radius: 8px; }
.promo a:focus-visible { outline: 3px solid #0B2239; outline-offset: 3px; }
.promo img { display: block; max-width: 100%; height: auto; }
</style>
<aside class="promo">
<h2>Servicios en línea</h2>
<a href="#">
<img src="data:image/svg+xml,…" width="320" height="90" alt="Cita previa por internet: pida cita sin colas, las 24 horas">
</a>
</aside>Pruébelo aquí:
Cómo comprobarlo
Errores frecuentes en auditorías
- Banners y carruseles con texto incrustado cuyo alt es «banner», «slider» o una descripción visual, sin las palabras de la imagen.
- Empezar el alt con «Imagen de…» o «Foto de…», que el lector ya indica al anunciar que es una imagen.
- Imágenes de texto que deberían ser texto real (criterio 1.4.5): el alt resuelve el problema para el lector de pantalla, pero no para quien amplía la página o cambia los colores.
- En imágenes enlazadas, describir la imagen en vez del destino o la acción del enlace.
Técnica completa: traducción al español del texto del W3C
Aplicabilidad
Imágenes usadas en documentos HTML.
Descripción
Cuando use el elemento img, especifique una alternativa textual corta con el
atributo alt. Nota: al valor de este atributo se le suele llamar «texto
alternativo» o «texto alt».
Cuando una imagen contiene palabras importantes para entender el contenido, el texto alternativo debe incluir esas palabras. Esto permite que el texto alternativo cumpla en la página la misma función que la imagen. Tenga en cuenta que no describe necesariamente las características visuales de la propia imagen, pero debe transmitir el mismo significado que la imagen.
Ejemplos
Una imagen de un sitio web proporciona un enlace a un boletín gratuito. La imagen contiene el texto "Free newsletter. Get free recipes, news, and more. Learn more." (boletín gratuito; reciba recetas, noticias y mucho más gratis; más información). El texto alternativo coincide con el texto de la imagen.
<img src="newsletter.gif" alt="Free newsletter.
Get free recipes, news, and more. Learn more.">Una imagen de un sitio web representa el plano de un edificio. La imagen es un mapa de imagen en el que cada habitación es un área interactiva del mapa. El texto alternativo es «Plano del edificio. Seleccione una habitación para obtener más información sobre su finalidad o su contenido». La instrucción de «seleccionar una habitación» indica que la imagen es interactiva.
Pruebas
Procedimiento
- Examinar cada elemento
imgdel contenido. - Comprobar que cada elemento
imgque transmite significado contiene un atributoalt. - Si la imagen contiene palabras importantes para entender el contenido, comprobar que esas palabras están incluidas en la alternativa textual.
Resultados esperados
Las comprobaciones n.º 2 y n.º 3 son verdaderas.
Recursos
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 H37 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.
