Técnica ARIA WCAG 2.2

ARIA10Usar aria-labelledby para proporcionar una alternativa textual al contenido no textual

En resumen

Algunos gráficos complejos, como una valoración con estrellas formada por varias imágenes, no admiten un único atributo alt que los describa en conjunto. Esta técnica muestra cómo usar aria-labelledby para que el texto ya visible en la página (por ejemplo, «3 de 5 estrellas») actúe como alternativa textual del gráfico completo. Está pensada para elementos que no admiten alt y para los que existe un texto visible que los describe.

Aplicabilidad

Esta técnica se aplica a HTML con Accessible Rich Internet Applications (WAI-ARIA).

Descripción

El propósito de esta técnica es proporcionar una descripción corta de un elemento, que las tecnologías de asistencia puedan leer, mediante el atributo aria-labelledby. El atributo aria-labelledby asocia un elemento con un texto visible en otro lugar de la página usando un valor de referencia de id que coincide con el atributo id del elemento que hace de etiqueta. Las tecnologías de asistencia, como los lectores de pantalla, usan el texto del elemento identificado por el valor del atributo aria-labelledby como alternativa textual del elemento que lleva el atributo.

Ejemplos

Proporcionar una descripción corta para un gráfico complejo

Este ejemplo muestra cómo usar el atributo aria-labelledby para proporcionar una descripción textual corta de un gráfico complejo de solo lectura con un patrón de valoración por estrellas; el gráfico está compuesto por varios elementos de imagen. La alternativa textual del gráfico es la etiqueta visible en la página debajo del patrón de estrellas.

<div role="img" aria-labelledby="star-id">
  <img src="fullstar.png" alt="">
  <img src="fullstar.png" alt="">
  <img src="fullstar.png" alt="">
  <img src="fullstar.png" alt="">
  <img src="emptystar.png" alt="">
</div>
<div id="star-id">4 of 5</div>

Ejemplo funcional: Proporcionar una descripción corta para un gráfico complejo.

Pruebas

Procedimiento

Examinar cada elemento en el que esté presente el atributo aria-labelledby y que no admita el atributo alt.
Comprobar si el valor del atributo aria-labelledby es el id de un elemento de la página web.
Determinar que el texto del elemento identificado por el atributo aria-labelledby etiqueta con precisión el elemento, describe su propósito o proporciona información equivalente.

Resultados esperados

Las comprobaciones n.º 2 y n.º 3 son verdaderas.

Recursos

WAI-ARIA Authoring Practices Guide (guía de prácticas de autor de WAI-ARIA)
HTML Accessibility API Mappings
Accessible Name and Description Computation (cálculo del nombre y la descripción accesibles)

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.

Solicitar una auditoría

Fuente y licencia

Traducción al español, no oficial, realizada por ADDAW a partir de la técnica ARIA10 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.