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 imágenes 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.

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

Imágenes decorativas

Decimos que una imagen es decorativa cuando su finalidad es principalmente estética o cuando su contenido ya aparece 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.

Nota: Siempre que sea posible se deben incluir las imágenes decorativas como imágenes de fondo, utilizando 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 añadir una descripción larga a una imagen es añadiendo 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. Este enlace se coloca a continuación de la imagen y se conecta con un texto dentro de la misma página (enlace ancla) o en otra página.

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 incluimos el archivo SVG en línea, entonces debemos incluir el atributo title con una descripción de la imagen, y el atributo role="img" para evitar que sea ignorada por algunos lectores de pantalla.

<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.
• Utiliza signos de puntuación, como en cualquier otro texto, para que los lectores de pantalla realicen pausas.
• Si la imagen contiene texto relevante, ponlo en el texto alternativo.

Imágenes adaptables

Una imagen accesible debe adaptarse a las diferentes resoluciones y tamaños de pantalla.

Para que una imagen sea fluida usamos la propiedad max-width.:

img {
  max-width: 100%;
  height: auto;
}

Este sistema funciona bien, pero tiene un inconveniente, estamos cargando siempre una imagen grande, lo cual aumenta el tiempo de carga innecesariamente en dispositivos móviles.

El atributo srcset

El atributo srcset permite definir un conjunto de imágenes con diferentes tamaños y el atributo sizes indica qué imagen debe utilizar el navegador según el tamaño de la ventana:

<img
  srcset="coche-576w.jpg 576w, coche-800w.jpg 800w"
  sizes="(max-width: 600px) 576px, 800px"
  src="coche-800w.jpg"
  alt="Coche eléctrico"
/>

El elemento picture

A veces necesitamos mostrar diferentes imágenes en diferentes tamaños de pantalla. Por ejemplo, una imagen de un paisaje puede mostrar muchos detalles cuando se ve en un monitor grande, pero que se pierden al verla en un móvil.

El elemento picture permite definir múltiples imágenes mediante el atributo srcset y especificar cuándo debe cargar cada una con el atributo media, siguiendo las mismas reglas que las media queries.

<picture>
  <source srcset="mesa.jpg" media="(max-width: 767px)" />
  <source srcset="despacho.jpg" media="(min-width: 768px)" />
  <img src="despacho.jpg" alt="Despacho con mesa escritorio en el centro." />
</picture>

El elemento picture también nos permite utilizar un formato de imagen moderno e incluir una imagen alternativa para los navegadores que no lo soporten:

<picture>
  <source type="image/webp" srcset="playa.webp" />
  <img src="playa.jpg" alt="Playa mediterránea al atardecer." />
</picture>