Guía para incluir textos alternativos adecuados y accesibles a las imágenes de tu web
Página de resultado. Seleccionaste:
- Que la imagen no es o no forma parte de un enlace o botón
- Que la imagen no es decorativa o invisible, sino que aporta información adicional.
- Que la imagen no es un cuadro ni otra expresión artística cuya función principal es crear una experiencia sensorial que las palabras no pueden igualar.
- Que la imagen no es parte de una prueba o test que queda inavalidado si se describe la imagen (un captcha, un test de daltonismo, etc.) o que es practicamente inviable describir para completarlo correctamente (un test lógico de secuencia de formas, etc.)
- Que la imagen forma parte de una serie de imágenes contiguas que transmiten una información de forma conjunta.
La imagen forma parte de una serie de imágenes contiguas que transmiten una información de forma conjunta
La primera imagen debe incluir el atributo ALT:
alt="proporciona la información que transmite el grupo en su conjunto"
El resto de las imágenes del conjunto incluirán el atributo ALT vacío y no incluirán en atributo TITLE a menos que también esté vacío:
alt=""
Ejemplos:
Ejemplo 1. 5 estrellas que transmiten una puntuación
Por ejemplo si cada una de las siguientes estrellas fuera una imagen diferente: 
El código HTML debería ser:
<img src="images/estrella_amarilla.png" alt="Puntuación: tres estrellas de cinco"/>
<img src="images/estrella_amarilla.png" alt=""/>
<img src="images/estrella_amarilla.png" alt=""/>
<img src="images/estrella_blanca.png" alt=""/>
<img src="images/estrella_blanca.png" alt=""/>
La primera imagen transmite la información o función que proporciona el conjunto, en este caso la puntuación obtenida. El resto de imágenes tienen alt="" y por tanto serán ignoradas por los productos de apoyo.
Ejemplo 2. 3 letras en imágenes diferentes formando una palabra
Por ejemplo si cada una de las siguientes letras fuera una imagen diferente: 
El código HTML debería ser:
<img src="images/r.png" alt="RGB"/>
<img src="images/g.png" alt=""/>
<img src="images/b.png" alt=""/>
En este caso las imágenes transmiten en su conjunto el texto RGB. Sería preferible tener una única imagen, y mejor todavía usar texto con los estilos definidos en las CSS.
Ejemplo tomado de 3.11 A group of images that form a single larger picture
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.
- No es lo mismo
alt=""que la ausencia del atributo ALT. Solo en el primer caso las imágenes serán ignoradas por los productos de apoyo. - Las imágenes con
alt=""no deben tener el atributo TITLE o debe estar vacío. - Recuerda que el objetivo no es describir los detalles gráficos de las imagénes, sino transmitir la misma información o función que nos proporcionan estas imágenes en su conjunto. Pregúntate, ¿por qué están aquí? ¿qué información transmiten? ¿cuál es su propósito? si no pudiera usar las imagen ¿qué texto usaría para transmitir la misma información y/o función?
Recursos:
- Técnica G196 de las WCAG 2.0: G196: Using a text alternative on one item within a group of images that describes all items in the group
- 3.11 A group of images that form a single larger picture 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.
