Addaw, ir a inicio Donar

Técnica ARIA WCAG 2.2

ARIA10Usar un texto visible como alternativa de una imagen con aria-labelledby

Nombre oficial en el W3C: Usar aria-labelledby para proporcionar una alternativa textual al contenido no textual

En pocas palabras

Algunas imágenes o gráficos ya tienen al lado un texto visible que dice lo mismo, como «Valoración: 4 de 5 estrellas» bajo unas estrellas. Con aria-labelledby, ese texto se convierte en la alternativa de la imagen. El lector de pantalla lo lee como nombre de la imagen y no hace falta escribirlo dos veces.

Por qué es importante

Una persona ciega no percibe una fila de estrellas, un gráfico o un grupo de iconos. Necesita un texto que transmita lo mismo.

Si ese texto ya está en la página, copiarlo en un alt obliga a mantener dos versiones. Con el tiempo, una cambia y la otra no. Con aria-labelledby hay un único texto, visible para todos y leído por el lector de pantalla.

Cómo se hace

  1. Úselo sobre todo con imágenes formadas por varias piezas o que no admiten alt, como un grupo de iconos o un <svg>. Para una <img> sencilla, lo habitual es alt.
  2. Agrupe las piezas en un contenedor con role="img". Así el conjunto se presenta como una sola imagen.
  3. Ponga un id único al texto visible que describe la imagen.
  4. Añada al contenedor aria-labelledby con ese id.
  5. Compruebe que el texto transmite lo mismo que la imagen: el dato o la función, no el aspecto.

Cómo comprobarlo

  1. Busque los elementos con aria-labelledby que representan imágenes o gráficos.
  2. Compruebe que el id indicado existe en la página.
  3. Lea el texto al que apunta y confirme que transmite la misma información que la imagen.
  4. Con las herramientas del navegador (F12, panel «Accesibilidad»), confirme que el rol es «img» y que el nombre es ese texto.

Ejemplo

Valoración de un producto hecha con cinco imágenes de estrellas.

<div role="img" aria-labelledby="nota">
  <img src="estrella-llena.svg" alt="">
  <img src="estrella-llena.svg" alt="">
  <img src="estrella-llena.svg" alt="">
  <img src="estrella-llena.svg" alt="">
  <img src="estrella-vacia.svg" alt="">
</div>
<p id="nota">Valoración: 4 de 5 estrellas</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 ARIA10 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

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

  1. Examinar cada elemento en el que esté presente el atributo aria-labelledby y que no admita el atributo alt.
  2. Comprobar si el valor del atributo aria-labelledby es el id de un elemento de la página web.
  3. 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

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