Técnica ARIA WCAG 2.2

ARIA15Describir imágenes complejas con aria-describedby

Nombre oficial en el W3C: Usar aria-describedby para proporcionar descripciones de imágenes

En pocas palabras

Algunas imágenes, como un gráfico o un plano, necesitan más explicación de la que cabe en el texto alternativo. Con aria-describedby se enlaza la imagen con un texto de la misma página que la describe a fondo. El lector de pantalla lee primero el nombre corto y después esa descripción.

Por qué es importante

El atributo alt debe ser breve: «Gráfico de visitas al museo en 2025». Pero una persona ciega también necesita los datos que muestra el gráfico.

Si la descripción está en la propia página, sirve a todos: a quien usa lector de pantalla, a quien ve mal y a quien no entiende bien el gráfico. Además, aria-describedby deja claro qué texto describe cada imagen.

Cómo se hace

Dé a la imagen un alt corto que diga qué es.
Escriba la descripción larga en la página, cerca de la imagen.
Dé a ese texto un id único, por ejemplo id="desc-visitas".
Añada a la imagen aria-describedby="desc-visitas".
Si la descripción está repartida en varios elementos, ponga sus id separados por espacios.
El lector lee la descripción como un texto seguido. Si hay muchos datos, póngalos también en una tabla visible.

Cómo comprobarlo

Busque las imágenes que tienen aria-describedby.
Compruebe que cada id indicado existe en la página.
Lea juntos el alt y la descripción. Entre los dos deben transmitir lo mismo que la imagen.
Con un lector de pantalla, sitúese en la imagen. Debe leer el nombre corto y después la descripción.

Ejemplo

Gráfico de barras con su descripción en un párrafo visible debajo.

<img src="visitas-2025.png" alt="Gráfico de visitas al museo en 2025"
     aria-describedby="desc-visitas">
<p id="desc-visitas">
  Las visitas crecen de enero (1.200) a agosto (4.800), su punto más alto.
  Después bajan hasta 1.500 en diciembre.
</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 ARIA15 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

Tecnologías que admiten Accessible Rich Internet Applications (WAI-ARIA).

Descripción

El objetivo de esta técnica es proporcionar descripciones de las imágenes cuando una alternativa textual corta no transmite adecuadamente la función o la información que ofrece el objeto.

Una de las características de WAI-ARIA es la posibilidad de asociar un texto descriptivo a una sección, un dibujo, un elemento de formulario, una fotografía, etc., mediante la propiedad aria-describedby. El texto descriptivo proporcionado con aria-describedby es independiente del nombre corto proporcionado con el atributo alt de HTML. Una ventaja de proporcionar descripciones largas usando contenido de la misma página en la que está la imagen es que la alternativa queda disponible para todo el mundo, incluidas las personas videntes que no disponen de tecnologías de asistencia.

Al igual que aria-labelledby, aria-describedby puede aceptar varios id para apuntar a otras zonas de la página mediante una lista separada por espacios. También está limitado a id para definir estos conjuntos.

Ejemplos

Describir una imagen

El siguiente ejemplo muestra cómo puede aplicarse aria-describedby a una imagen para proporcionar una descripción larga, cuando esa descripción textual está en la misma página que la imagen.

<img src="ladymacbeth.jpg" alt="Lady MacBeth" aria-describedby="p1">
<p id="p1">This painting dates back to 1889 and is oil on canvas. It was created by 
 John Singer Sargent, and represents ...</p>

Pruebas

Procedimiento

Examinar cada elemento de imagen en el que esté presente un atributo aria-describedby.
Examinar si el atributo aria-describedby asocia por software un elemento con su descripción textual, a través del atributo id del elemento en el que se encuentra el texto que se usará como descripción.
Examinar si la combinación del equivalente textual y la descripción textual asociada describe con precisión el objeto o proporciona su propósito equivalente.

Resultados esperados

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

Recursos

WAI-ARIA Authoring Practices Guide (guía de prácticas de autor de WAI-ARIA)
HTML to Platform Accessibility APIs Implementation Guide: Accessible Name and Description Calculation (cálculo del nombre y la descripción accesibles)

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 ARIA15 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.