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

Página de resultado. Seleccionaste:

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: Cinco estrellas, las tres primeras resaltadas. Transmiten que la puntuación es de 3 estrellas sobre 5.

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: Tres cuadrados. El primero tiene fondo rojo y la letra R. El segundo tiene fondo verde y la letra G.  El tercero tiene fondo azul y la letra B. En su conjunto forman la palabra RGB.

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

Recursos:

¿A quién beneficia?