Imágenes

Imágenes informativas

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

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.

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.

Por ejemplo, un icono de ayuda con el texto alternativo “Más información”, deberá tener el mismo texto cada vez que aparezca en el sitio web.

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 a la etiqueta 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 la etiqueta 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.

Nota: 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.

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>

Comprobación

Comprueba que todas las imágenes cumplen los siguientes requisitos:

• Incluyen el atributo alt.
• El texto del atributo alt es breve, conciso y descriptivo.
• En las imágenes decorativas el atributo alt aparece vacío.
• Las imágenes complejas (mapas, gráficos...) disponen de una descripción larga a continuación o mediante un enlace.

Se pueden realizar estas comprobaciones mediante el inspector de código del navegador, o con la ayuda de una herramienta como Web Developer.