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 no es un botón de tipo imagen ni un mapa de imagen
- Que dentro del enlace también hay texto
- Que la imagen aporta información adicional al texto del enlace complementándolo.
La imagen complementa la información del texto del enlace
alt="información adicional que transmite la imagen"
Debes incluir el atributo ALT a la imagen.
El texto alternativo proporcionado por este atributo debe indicar la información adicional que transmite la imagen y que está complementando a la información que transmite el texto del enlace.
Ejemplos:
El código HTML debería ser:
<a href="memoria.pdf">Memoria 2014 <img src="images/pdf.jpg" alt="en formato PDF"/></a>
En este caso, el icono PDF está aportando información extra, que la descarga será de un fichero PDF.
La redacción del texto alternativo se ha realizado teniendo en cuenta su contexto. El texto del enlace es más comprensible como "Memoria 2014 en formato PDF" que simplemente "Memoria 2014 PDF"
Recomendaciones generales
- 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
- 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.
