Addaw, ir a inicio Donar

Técnica HTML WCAG 2.2

H37Usar el atributo alt en las imágenes

Nombre oficial en el W3C: Usar atributos alt en los elementos img

En pocas palabras

Cada imagen que aporta información necesita un atributo alt con un texto corto que cumpla la misma función que la imagen. Si la imagen contiene palabras importantes, el alt debe incluirlas. Si es un enlace, debe decir adónde lleva. Las imágenes solo decorativas llevan alt vacío.

Por qué es importante

Las personas ciegas usan lectores de pantalla (programas que leen en voz alta lo que hay en la pantalla). Estos programas no ven la imagen: leen su alt.

  • Sin alt, el lector puede leer el nombre del archivo, como «banner-def-02.jpg».
  • Con un alt pobre, como «imagen», la persona se pierde la información.
  • El alt también se muestra si la imagen no carga por una mala conexión.

Cómo se hace

  1. Pregúntese qué aporta la imagen en esa página. Escriba eso en el alt, no su aspecto.
  2. Si la imagen tiene texto, como un banner o un cartel, copie esas palabras en el alt.
  3. Si la imagen es un enlace o un botón, indique el destino o la acción: «Ir a la página de inicio».
  4. No empiece con «Imagen de» o «Foto de». El lector ya avisa de que es una imagen.
  5. Si la imagen es solo decorativa, ponga alt="" para que el lector la ignore.
  6. Sea breve. Si la imagen necesita una explicación larga, como un gráfico, póngala en el texto de la página.

Ejemplo práctico

El caso más habitual es un banner enlazado que lleva texto dentro de la imagen. Su alt debe recoger esas palabras. Ejemplo: un banner en la portada de un ayuntamiento que lleva a la cita previa.

Así no: Banner enlazado cuyo alt no recoge el texto de la imagen

La imagen enlazada tiene texto, pero el alt la describe en vez de copiar sus palabras. El lector de pantalla anuncia «Imagen promocional del Ayuntamiento, enlace». No se sabe que el enlace sirve para pedir cita previa. Para notarlo, recorra la demo con Tab y con NVDA o VoiceOver activado.

Captura de pantalla del ejemplo incorrecto: Banner enlazado cuyo alt no recoge el texto de la imagen
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>
  .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>

Así sí: Banner enlazado con las palabras de la imagen en el alt

El alt copia el texto del banner, que además dice adónde lleva el enlace. Así cumple la misma función que la imagen. El enlace tiene un nombre que se entiende aunque se lea suelto.

Pruébelo aquí:

Ver el código del ejemplo correcto
<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>

Cómo comprobarlo

Lector de pantalla (NVDA o VoiceOver)

  1. Recorra los enlaces con Tab. En NVDA también puede usar la tecla K en modo exploración.
  2. Compare lo que se anuncia con el texto que se ve en la imagen. Las palabras importantes deben coincidir.

Debería anunciar: «Cita previa por internet: pida cita sin colas, las 24 horas, enlace»

Herramientas del navegador

  1. Abra las herramientas del navegador (F12) e inspeccione cada imagen. Lea su atributo alt o el nombre (Name) en el panel Accesibilidad.
  2. En las imágenes con texto, compruebe que el alt incluye ese texto. En las demás, compruebe que transmite su función o su información, no su aspecto.

Validación automática

  1. La regla image-alt de axe DevTools (y de Lighthouse) y WAVE solo comprueban que el alt exista. No verifican que incluya las palabras de la imagen.
  2. WAVE muestra el alt de cada imagen junto a ella. Eso agiliza la revisión a mano.

Errores frecuentes en auditorías

  • Banners y carruseles con texto dentro 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…». El lector ya avisa de que es una imagen.
  • Usar imágenes de texto que deberían ser texto real (criterio 1.4.5). El alt ayuda al lector de pantalla, pero no a 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.

Para saber más, en nuestro blog

Ver el texto completo del W3C (traducción al español)

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

  1. Examinar cada elemento img del contenido.
  2. Comprobar que cada elemento img que transmite significado contiene un atributo alt.
  3. 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 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 H37 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.