Técnica Técnicas generales WCAG 2.2
G196Usar una alternativa textual en un elemento de un grupo de imágenes que describa todos los elementos del grupo
En resumen
Cuando varias imágenes adyacentes transmiten juntas una sola información (por ejemplo, las cinco estrellas de una valoración), no hace falta describir cada imagen por separado: basta con poner una alternativa textual para todo el grupo en una de ellas y marcar las demás para que las tecnologías de asistencia las ignoren. Así, quien usa un lector de pantalla recibe el mensaje una sola vez, sin repeticiones ni confusión.
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 las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica G196 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
