Saltar al contenido principal

Imágenes

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 incluir texto alternativo 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.

Ejemplo 1: Logo con enlace

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

En este caso también podríamos poner simplemente el nombre del sitio (alt="W3C España") puesto que enlazar el logo con la página principal es una convención.

Ejemplo 2: Icono de formato de archivo

En este ejemplo el texto alternativo indica el formato de archivo del enlace.

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

Ejemplo 3: Foto

En este caso se utiliza el elemento figure para indicar que es un elemento independiente y figcaption para añadir una 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 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 (lo que permite aplicarle estilos CSS, entre otras ventajas) entonces debemos añadir el atributo title junto a la propiedad aria-labelledby.

Ejemplo: SVG en línea accesible.

HTML
<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="title" viewBox="0 0 54.908 54.908">
<title id="title">WiFi disponible</title>
    <path d="M54.615 19.123C47.372 11.88..."/>
</svg>

Nota: Si la imagen SVG es puramente decorativa, no es necesario incluir el atributo title y se puede añadir el 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: El texto alternativo depende del contexto y del propósito de la imagen. Para resolver las dudas sobre qué texto conviene incluir te recomiendo la guía para incluir textos alternativos de Olga Carreras.

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 es 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 media queries.

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>

Aviso: El elemento picture se considera una tecnología experimental. Por ese motivo es necesario incluir el elemento img con el atributo src para los navegadores que todavía no lo soportan.