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 usando el atributo alt. Este atributo contiene un texto breve que describe el contenido o la función de la imagen.

En caso de imágenes decorativas se coloca el atributo vacío (alt="").

El texto alternativo depende del contexto y del propósito de la imagen. A continuación veremos diferentes tipos de imágenes y su texto alternativo más adecuado.

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 2019 <img src="icon-pdf.png" alt="PDF"></a>

Ejemplo 2: Foto

En este caso el texto alternativo describe el contenido de la imagen.

Ejemplo
El presidente de Estados Unidos John F. Kennedy haciendo un discurso.
HTML
<img src="john-f-kennedy.jpg" alt="El presidente de Estados Unidos
John F. Kennedy haciendo un discurso.">

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.

Nota: 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, como en cualquier otro tipo de imagen.

Pero si se incluye el archivo SVG en línea, entonces debemos incluir el atributo title.

Ejemplo: SVG en línea accesible

Ejemplo
WiFi disponible
HTML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 55">
    <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.

Otras formas de añadir texto a una imagen

Existen otras formas de añadir información textual a una imagen además del atributo alt, estas son:

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

  • Pie de foto: sirve 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.

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>

Criterios de conformidad WCAG 2.1