Imágenes

Imágenes informativas

Una imagen informativa representa un concepto o una idea simple. El texto alternativo debe indicar el significado de la imagen o describir su contenido.

<img
  src="piano.jpg"
  alt="Un hombre tocando el piano al aire libre, en una montaña, 
  durante la puesta de sol."
>

Imágenes funcionales

Las imágenes funcionales son interactivas y suelen formar parte de enlaces o botones. El texto alternativo de una imagen funcional indica el destino del enlace o la acción que se va a realizar.

Ejemplo: logo con enlace.

<a href="https://www.spotify.com/es/">
  <img src="logo-spotify.svg" alt="Spotify - Inicio">
</a>

Imágenes decorativas

Una imagen es decorativa cuando su finalidad es principalmente estética o su contenido ya está descrito en el texto.

Este tipo de imágenes también necesitan el atributo alt, en este caso vacío (alt=""). De esta forma le indicamos a los lectores de pantalla que pueden ignorar esa imagen.

La decisión de si una imagen es decorativa o no depende del autor. El objetivo es evitar que los lectores de pantalla lean contenido redundante o que no resulte relevante para el usuario.

Siempre que sea posible, conviene incluir las imágenes decorativas como fondo mediante CSS.

Imágenes complejas

Las imágenes complejas, como mapas, gráficos o infografías, requieren descripciones más largas que las imágenes simples que hemos visto hasta ahora.

Una forma de ofrecer esta descripción es añadir un texto a continuación de la imagen. Para reforzar la asociación entre el texto y la imagen podemos añadir el atributo aria-describedby al elemento <img> y el correspondiente id en el elemento que contiene la descripción.

Otra forma de añadir una descripción a una imagen es mediante un enlace que conduzca a una descripción más completa, ya sea en la misma página (enlace ancla) o en otra.

Imágenes vectoriales

Si incluimos una imagen con formato SVG mediante el elemento <img>, usamos el atributo alt como en cualquier otro tipo de imagen.

Pero si el SVG se incluye en línea, hay que usar el atributo title para describir la imagen y role="img" para que no sea ignorado por los lectores de pantalla.

Ejemplo: SVG en línea.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 55" role="img">
  <title>WiFi disponible</title>
  <path d="M54.615 19.123C47.372 11.88...">
</svg>

Si la imagen SVG es puramente decorativa, no es necesario incluir el atributo title. En ese caso podemos añadir role="presentation" para indicar que es un elemento de presentación.

Texto alternativo

Algunas buenas prácticas a la hora de escribir un texto alternativo:

• Utiliza un texto breve y conciso.
• Aunque no existe un número máximo de caracteres, es aconsejable no superar los 150.
• No empieces el texto con las palabras "imagen de" o "foto de", los lectores de pantalla ya se encargan de anunciarlo.
• Usa signos de puntuación, como en cualquier otro texto, para facilitar la entonación.
• Si la imagen contiene texto relevante, ponlo en el texto alternativo.