Imágenes
Una imagen accesible debe tener un texto alternativo breve y conciso que describa su contenido o función.
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.