Imágenes

Imágenes informativas

Una imagen informativa ayuda a entender mejor el contenido de la página.

El texto alternativo debe reflejar el significado de la imagen o describir lo que muestra.

<img
  src="piano.jpg"
  alt="Un hombre tocando el piano al aire libre, en una montaña, 
  durante la puesta de sol."
>

Texto alternativo

Buenas prácticas a la hora de escribir un texto alternativo en imágenes informativas:

• Utiliza un texto breve y conciso.
• Aunque no hay un límite estricto de caracteres, se recomienda no superar los 150.
• Evita comenzar con "imagen de" o "foto de", ya que los lectores de pantalla ya indican que se trata de una imagen. Solo inclúyelo si es relevante distinguir el tipo, como en el caso de una ilustración o un dibujo.
• Utiliza signos de puntuación para facilitar la comprensión y la entonación.
• Si la imagen contiene texto importante, inclúyelo en el atributo alt.

Imágenes funcionales

Las imágenes funcionales forman parte de elementos interactivos, como enlaces o botones.

El texto alternativo debe describir el destino del enlace o la acción que realizará el usuario al activar el elemento.

Ejemplo: logo con enlace a la página de inicio de Spotify.

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

Imágenes de texto

Una imagen de texto representa palabras mediante una imagen en lugar de caracteres reales.

En estos casos, el atributo alt debe contener el mismo texto que aparece en la imagen.

No se recomienda usar imágenes de texto, ya que impiden que el usuario ajuste el tamaño o el color de la fuente según sus preferencias.

Imágenes no esenciales

Existen dos tipos de imágenes no esenciales:

• Decorativas: tienen una función puramente estética.
• Redundantes: su contenido ya se encuentra descrito en el texto.

Estas imágenes deben incluir el atributo alt vacío (alt=""), lo que indica a los lectores de pantalla que pueden ignorarlas.

Determinar si una imagen es esencial o no depende del autor. El objetivo es evitar que el lector de pantalla lea contenido innecesario o irrelevante.

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 ofrecer esta descripción es añadir 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 que conduzca a una descripción más completa, ya sea en la misma página (enlace ancla) o en otra.

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 el SVG se incluye en línea, hay que usar el atributo title para describir la imagen y role="img" para que no sea ignorado por los lectores de pantalla.

Ejemplo: SVG en línea.

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