Técnica Técnicas generales WCAG 2.2

G196Dar un solo texto alternativo a un grupo de imágenes que forman una idea

Nombre oficial en el W3C: Usar una alternativa textual en un elemento de un grupo de imágenes que describa todos los elementos del grupo

En pocas palabras

A veces varias imágenes juntas transmiten una sola información, como cinco estrellas que indican una valoración. En lugar de describir cada imagen, se pone el texto completo en la primera («3 de 5 estrellas»). Las demás llevan un texto alternativo vacío para que se ignoren.

Por qué es importante

Un lector de pantalla (programa que lee en voz alta la pantalla) lee cada imagen por separado. Si cada estrella tiene su propio texto, la persona oye «estrella llena, estrella llena, estrella llena, estrella vacía, estrella vacía».

Eso es largo, repetitivo y obliga a contar para entenderlo. Con un solo texto, oye directamente «3 de 5 estrellas». Es habitual en fichas de producto, opiniones de clientes o niveles de dificultad.

Cómo se hace

Identifique los grupos de imágenes que juntas expresan una sola idea.
Escriba un texto alternativo que exprese esa idea completa: «Valoración: 4 de 5».
Póngalo en la primera imagen del grupo.
Ponga alt="" en las demás imágenes del grupo para que se ignoren.
Mantenga todas las imágenes del grupo juntas, sin otro contenido entre ellas.

Cómo comprobarlo

Localice los grupos de imágenes que transmiten una sola información.
Revise el código: la primera imagen debe tener el texto completo y las demás alt="".
Recorra el grupo con un lector de pantalla y compruebe que la información se anuncia una sola vez.
Compruebe que el texto dice lo mismo que se ve: el número de estrellas debe coincidir.

Ejemplo

Una valoración de 3 sobre 5 hecha con cinco imágenes de estrellas.

<p>Valoración de los clientes:
  <img src="estrella-llena.png" alt="3 de 5 estrellas">
  <img src="estrella-llena.png" alt="">
  <img src="estrella-llena.png" alt="">
  <img src="estrella-vacia.png" alt="">
  <img src="estrella-vacia.png" alt="">
</p>

Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica G196 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.

Aplicabilidad

Cualquier tecnología en la que se utilice un grupo de contenido no textual para presentar información o funcionalidad.

Descripción

El objetivo de esta técnica es evitar la duplicación innecesaria que se produce cuando se utiliza un grupo de contenido no textual adyacente para presentar información o funcionalidad.

En algunos casos, las páginas presentan un grupo de imágenes para transmitir información. Cuando se presentan juntas o en una combinación concreta, estas agrupaciones pueden transmitir distintos tipos de información. Por ejemplo, dos imágenes de una estrella, una en blanco y negro y otra en color, pueden utilizarse combinadas para representar la valoración de los usuarios. Así, tres estrellas rellenas seguidas de dos estrellas vacías podrían representar una valoración de tres estrellas sobre cinco.

Para aplicar esta técnica, el autor proporciona una alternativa textual que cumple la misma finalidad para todo el grupo y la asocia a uno de los elementos del grupo. Los demás elementos del grupo se marcan de manera que las tecnologías de asistencia puedan ignorarlos. De este modo, el usuario puede identificar con más eficacia el propósito del grupo y se evitan la duplicación o la confusión que podrían producirse si se hubiera proporcionado una alternativa textual para cada elemento del grupo.

Ejemplos

Un sistema de valoración en HTML

En el siguiente ejemplo, una valoración se muestra como tres estrellas rellenas y dos estrellas vacías. Aunque podría haberse proporcionado una alternativa textual para cada una de las cinco imágenes, el autor ha optado por indicar la valoración con la forma "3 out of 5 stars" (3 estrellas sobre 5) en la primera imagen y ha marcado las demás con un texto alternativo vacío.

<p>Rating: 
  <img src="star-filled" alt="3 out of 5 stars">
  <img src="star-filled" alt="">
  <img src="star-filled" alt="">
  <img src="star-empty" alt="">
  <img src="star-empty" alt="">
</p>

Botones creados con grupos de imágenes en HTML

En este ejemplo, cada botón tiene un conjunto de imágenes que indica el nivel de conformidad con las WCAG que se declara. Este enfoque permite que las tecnologías de asistencia no anuncien cosas como «Imagen A, Imagen A, Imagen A», etc.

<p>Conformance Level:</p>
<button name="A" type="button">
  <img src="a.png" alt="A">
</button>
<button name="AA" type="button">
  <img src="a.png" alt="AA">
  <img src="a.png" alt="">
</button>
<button name="AAA" type="button">
  <img src="a.png" alt="AAA">
  <img src="a.png" alt="">
  <img src="a.png" alt="">
</button>

Pruebas

Procedimiento

Comprobar que uno de los elementos del grupo incluye una alternativa textual que cumple la misma finalidad para todo el grupo.
Comprobar que los demás elementos del grupo están marcados de manera que las tecnologías de asistencia puedan ignorarlos.
Comprobar que los elementos marcados de manera que las tecnologías de asistencia puedan ignorarlos son adyacentes al elemento que contiene la alternativa textual del grupo.

Resultados esperados

Todas las comprobaciones anteriores son verdaderas.

Cómo lo comprobamos en ADDAW

En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.

Solicitar una auditoría

Basado en la técnica G196 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.