Guía para incluir textos alternativos adecuados y accesibles a las imágenes de tu web

Página de resultado. Seleccionaste:

Caso 1. Tu imagen es un logotipo, o un icono, imagen o botón de tipo imagen en el que la imagen no tiene texto

alt="función de la imagen"

Debes incluir el atributo ALT a la imagen o al botón de tipo imagen.

El texto alternativo proporcionado por este atributo debe indicar la función de la imagen.

Ejemplos del caso 1:

Ejemplo 1.1 Logotipo

Logotipo de la web Usable y accesible que incluye el nombre de la autora: Olga Carreras

El código HTML debería ser:

<a href="http://www.usableyaccesible.com"><img src="images/logo_UsableAccesible.jpg" alt="Página principal de la web de Olga Carreras 'Usable y accesible'"/></a>

El texto alternativo de la imagen indica la función del enlace, nos permite distinguir un enlace de otro y decidir si queremos seguirlo.

No sería apropiado poner como texto alternativo la URL a la que enlaza, pues no sería suficientemente descriptivo.

El texto alternativo no comienza con un texto "Enlace a" o similar, porque el propio lector de pantalla ya nos anuncia que es un enlace y sería redundante.

Ejemplo 1.2 Solo icono o imagen

Recuadro con una lupa dentro

El código HTML debería ser:

<a href="buscador.php"><img src="images/buscar.png" alt="Buscar"/></a>

Sería inadecuado un texto alternativo que describiera el icono, por ejemplo, "recuadro azul con una lupa". El texto alternativo nos transmite la función del icono: "Buscar".

Ejemplo 1.3 Botón de tipo imagen

El código HTML debería ser:

<input type="image" src="images/buscar.png" alt="Buscar" />

Es el mismo caso que el ejemplo anterior pero con un botón de tipo imagen.

Caso 2. Tu imagen es un icono, imagen o botón de tipo imagen en el que la imagen tiene texto

alt="función de la imagen, normalmente su texto"

Debes incluir el atributo ALT a la imagen o al botón de imagen.

El texto alternativo proporcionado por este atributo debe indicar la función de la imagen, que habitualmente será el texto presente en la imagen.

Ejemplos del caso 2:

Ejemplo 2.1 Icono que incluye un texto

Recuadro con un sobre y el texto 'Enviar'

El código HTML debería ser:

<a href="enviar.php"><img src="images/b_enviar.gif" alt="Enviar"/></a>

Indicar en el texto alternativo que la imagen presenta un sobre no aportaría información relevante. El texto alternativo transmite la función de la imagen: "Enviar".

Ejemplo 2.2 Botón de tipo imagen que incluye un texto

El código HTML debería ser:

<input type="image" src="images/b_enviar.gif" alt="Enviar" />

Es el mismo caso que el ejemplo anterior pero con un botón de tipo imagen.

Caso 3. Tu imagen es un mapa de imagen

Imagen: alt="identifica el contenido y su función"

Áreas del mapa: alt="identifica cada área"

Debes incluir el atributo ALT a la imagen. El texto alternativo proporcionado por este atributo debe identificar el contenido de la imagen y su función.

Cada área del mapa debe incluir el atributo ALT. El texto alternativo proporcionado por este atributo debe identificar cada área clicable.

Ejemplos del caso 3:

Ejemplo 3.1 Mapa de imagen

Un mapa de imagen es una imagen divida en regiones clicables definidas por los elementos area. Por ejemplo un mapa de España en el cual cada provincia fuera clicable y nos llevara a una página diferente (como Ejemplo de un mapa de España que es un mapa de imagen)

La imagen del mapa de España podría tener el siguiente código:

<img src="images/mapa.gif" usemap="#map1" alt="Mapa de España. Selecciona una Comunidad Autónoma para acceder a su información turística"/></a>

El texto alternativo proporcionado por el atributo ALT identifica el contenido de la imagen y su función.

Un área del mapa tendría, por ejemplo, el siguiente código:

<map id="map1" name="map1">

<area shape="poly" coords="0,0,30,30" href="zaragoza.html" alt="Zaragoza">

El texto alternativo de cada área la identifica, nos permite discriminar unas áreas de otras.

Recomendaciones generales

Recursos:

¿A quién beneficia?