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. A continuación se muestran algunos ejemplos.

Ejemplo 1: Logo con enlace

En este caso incluimos simplemente el nombre del sitio como texto alternativo.

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

Ejemplo 2: Icono de formato de archivo

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

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.