Guía para incluir textos alternativos adecuados y accesibles a las imágenes de tu web
Página de resultado. Seleccionaste:
- Que tu imagen es o forma parte de un enlace o botón
- Que tu imagen es el único elemento dentro del enlace o bien es un botón de tipo imagen o un mapa de imagen
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
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
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
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
- No es necesario comenzar la descripción con "Enlace a" o similar, el lector de pantalla ya nos anuncia que es un enlace y será redundante.
- El atributo ALT y el atributo TITLE tienen funciones diferentes. El atributo ALT ofrece el texto alternativo de la imagen, transmite la misma información o función, y será este el que lea el lector de pantalla o el que aparezca cuando la imagen no se cargue. El atributo TITLE en las imágenes es opcional, sirve para incluir información adicional o complementaria (la fecha, el autor, el origen de la imagen) pero nunca debe incluir la misma información que el atributo ALT ni incluir información obvia o importante.
- Recuerda que el objetivo no es describir los detalles gráficos del icono o la imagen, sino transmitir la misma información o su función. Ten en cuenta el contexto, una misma imagen en un contexto diferente puede necesitar un texto alternativo distinto. Pregúntate, ¿por qué está aquí la imagen? ¿qué información transmite? ¿cuál es su propósito? si no pudiera usar la imagen ¿qué texto usaría para transmitir la misma información y/o función?
Recursos:
- Técnica H30 de las WCAG 2.0: H30: Providing link text that describes the purpose of a link for anchor elements
- Técnica H24 de las WCAG 2.0: H24: Providing text alternatives for the area elements of image maps
- 3.1 A link or button containing only an image en HTML5: Techniques for providing useful text alternatives (W3C).
- The alt and title attributes, de 456 Berea St.
- Otras técnicas con WAI-ARIA u otras tecnologías (Flash, PDF):
¿A quién beneficia?
- A las personas con dificultades para percibir el contenido visual (personas con ceguera, baja visión, sordo-ciegas) o con dificultades de comprensión del contenido visual. La información contenida en el texto se puede presentar al usuario de la manera que mejor se adapte a sus necesidades: en braille, leída en voz alta o presentarla visualmente.
- A las personas que por limitaciones técnicas no pueden acceder al contenido visual: navegan con las imágenes deshabilitadas por tener una conexión lenta o para ahorrar costes en la tarifa por datos, hay un problema en el servidor y no se están sirviendo las imágenes o alguna de estas ya no está disponible. También pueden estar usando un navegador solo-texto.
- A los buscadores web, pues se basan en el contenido textual para indexar los contenidos.
