Saltar al contenido principal

Imágenes

Las imágenes deben tener un texto alternativo que describa la información o la función que representan.

Texto alternativo

El texto alternativo se incluye principalmente usando el atributo alt. El atributo alt contiene un texto breve que describe el contenido o la función de la imagen.

El atributo alt debe incluirse siempre para que sea HTML válido. En caso de imágenes decorativas se coloca el atributo vacío (alt="").

Otras formas de añadir información textual a una imagen son:

  • El atributo title
    Es opcional y sirve para incluir información complementaria.

  • Pie de foto
    Suele usarse para añadir información complementaria. Hay que evitar repetir la misma información que en alt.

  • Descripción larga
    Se utiliza en imágenes complejas. Se puede incluir a continuación de la imagen, en otro punto de la página (usando un enlace ancla) o en otra página enlazada.

El texto alternativo depende del contexto y del propósito de la imagen.

Pauta de Accesibilidad 1.1: Alternativas textuales, criterio de conformidad 1.1.1.

Imágenes informativas

Son imágenes que representan conceptos e información. El texto alternativo debería describir en una frase el contenido o significado de la imagen.

Ejemplo 1: Icono de formato de archivo

En este ejemplo el texto alternativo indica el formato del archivo vinculado.

Ejemplo
HTML
<a href="#">
    Informe anual 2018 <img src="icon-pdf.png" alt="PDF">
</a>

Ejemplo 2: Foto

En este caso, además de alt, utilizamos el elemento figcaption para añadir información adicional.

Ejemplo
El presidente de Estados Unidos John F. Kennedy haciendo un discurso.
John F. Kennedy (foto de dominio público)
HTML
<figure>
  <img src="john-f-kennedy.jpg" alt="El presidente de Estados
  Unidos John F. Kennedy haciendo un discurso.">
  <figcaption>John F. Kennedy (foto de dominio público)</figcaption>
</figure>

Imágenes funcionales

Las imágenes funcionales son imágenes interactivas y suelen formar parte de enlaces o botones. En este caso, el texto del atributo alt indica el destino del enlace o la acción que se va a realizar.

Ejemplo: Logo con enlace

En este caso incluimos el nombre de la página de destino como texto alternativo.

Ejemplo
HTML
<a href="http://www.w3c.es">
    <img src="logo-w3c.png" alt="Inicio W3C España">
</a>

Imágenes decorativas

Cuando una imagen no aporta información al contenido de la página, utilizamos el atributo alt vacío (alt=""). De esta forma los lectores de pantalla ignoran la imagen.

Decimos que una imagen es decorativa cuando su finalidad es principalmente estética, o bien cuando su contenido ya aparece descrito en el texto.

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, se deben incluir las imágenes decorativas como imágenes de fondo, utilizando CSS.

Imágenes con formato SVG

Si se incluye la imagen SVG con la etiqueta img entonces se utiliza el atributo alt, con en cualquier otro tipo de imagen.

Pero si se incluye el archivo SVG en línea, entonces debemos añadir el atributo title junto a la propiedad aria-labelledby.

Ejemplo: SVG en línea accesible

Ejemplo
WiFi disponible
HTML
<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="icon-title"
viewBox="0 0 54.908 54.908">
<title id="icon-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 consistente

Los textos alternativos de las imágenes deben ser consistentes. Si una imagen hace referencia a un mismo tipo de documento o a una misma función, entonces debe tener el mismo texto alternativo.

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.

Nota: Aunque no existe una longitud máxima para el texto alternativo se recomienda no utilizar más de 125 caracteres.

Optimización de imágenes

Cuanto más espacio ocupa una página web más tarda en cargar en el navegador. Y con una conexión lenta, la espera se puede hacer eterna. Los archivos más grandes de un sitio web suelen ser las imágenes, por eso es importante utilizar el formato más adecuado y comprimir siempre las imágenes, para que ocupen lo menos posible.

Veamos algunas técnicas de optimización:

  • Formato: Siempre que se trate de imágenes vectoriales (logos, iconos, formas geométricas…) utiliza el formato SVG. Es el que ocupa menos espacio y además es escalable.
  • Compresión: Cuando se trata de imágenes de mapas de bits, como las fotografías, usamos formatos como PNG o JPG. En estos casos es importante que las imágenes estén comprimidas, para ello podemos usar herramientas como ImageOptim.
  • Elemento <picture>: Este elemento nos permite ofrecer diferentes tamaños de imagen dependiendo del ancho de la ventana de visualización.
  • Carga diferida: La carga diferida de imágenes (lazy loading en inglés) consiste en que las imágenes cargan a medida que van apareciendo en la pantalla.

Imágenes adaptables

Para que una imagen se adapte a las diferentes resoluciones de pantalla, usamos la propiedad max-width con el valor 100%.

Ejemplo 1: Aplicar max-width: 100% a las imágenes

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

Utilizando esta técnica, podemos cargar una única imagen de gran tamaño, que se adaptará ocupando siempre el tamaño máximo disponible.

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.

Una solución más eficiente en este caso, sería utilizar picture. 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 consultas de medios.

Ejemplo 2: El elemento picture

HTML
<picture>
    <source srcset="car-large.jpg" media="(min-width: 800px)">
    <source srcset="car-medium.jpg" media="(min-width: 400px)">
    <img src="car-small.jpg" alt="Coche eléctrico">
</picture>