Técnica ARIA WCAG 2.2

ARIA7Usar aria-labelledby para indicar el propósito de los enlaces

En resumen

Los enlaces genéricos del tipo «leer más» son claros para quien ve la página pero ambiguos para quien usa un lector de pantalla. Esta técnica muestra cómo asociar al enlace, mediante aria-labelledby, uno o varios textos ya visibles (por ejemplo, el encabezado de la noticia) para que su nombre accesible describa a dónde lleva. Es útil en listados de noticias, productos o artículos con enlaces repetidos.

Aplicabilidad

Tecnologías compatibles con Accessible Rich Internet Applications (WAI-ARIA).

Descripción

Con el atributo aria-labelledby, quien desarrolla puede usar un elemento de texto visible en la página como etiqueta de un elemento enfocable (un control de formulario o un enlace). Por ejemplo, un enlace "read more..." (leer más...) podría asociarse al texto del encabezado de la sección anterior para que el propósito del enlace no resulte ambiguo (véase el ejemplo 1).

Al asociar texto a un elemento enfocable con ayuda de aria-labelledby, se asigna al elemento de texto de destino un id al que se hace referencia en el valor del atributo aria-labelledby del elemento enfocable.

También es posible usar varios elementos de texto de la página como etiqueta de un elemento enfocable. A cada uno de los elementos de texto utilizados se le debe asignar un ID único, al que se hace referencia como una cadena de id (IDREF) en el valor del atributo aria-labelledby. El texto de la etiqueta se concatena entonces siguiendo el orden de los id en el valor del atributo aria-labelledby.

Aplicado a los enlaces, aria-labelledby puede usarse para identificar el propósito de un enlace que puede resultar evidente para los usuarios videntes, pero menos obvio para los usuarios de lectores de pantalla.

El comportamiento especificado de aria-labelledby es que el texto de la etiqueta asociada se anuncia en lugar del texto del enlace (no además del texto del enlace). Cuando el propio texto del enlace deba incluirse en el texto de la etiqueta, el ID del enlace también debe figurar en la cadena de ID que forma el valor del atributo aria-labelledby.

Para más información sobre la jerarquía de asignación de nombres, consulte Accessible Name and Description Computation.

Ejemplos

Proporcionar información adicional para los enlaces

En este ejemplo, el texto del enlace tal como se muestra en pantalla se usa como comienzo del nombre accesible del enlace. Los lectores de pantalla lo anunciarán como: "Read more ...Storms hit east coast" (Leer más... Las tormentas azotan la costa este) y mostrarán ese mismo texto en la lista de enlaces, lo cual resulta muy útil para los usuarios de lectores de pantalla que navegan por enlaces.

<h2 id="headline">Storms hit east coast</h2>
<p>Torrential rain and gale force winds have struck the east coast, 
   causing flooding in many coastal towns.
  <a id="p123" href="news.html" aria-labelledby="p123 headline">Read more...</a>
</p>

Concatenar el texto del enlace a partir de varias fuentes

Puede haber casos en los que quien desarrolla coloque una etiqueta alrededor de una sección de código a la que se hará referencia.

<p>Download <span id="report-title">2012 Sales Report</span>:
   <a aria-labelledby="report-title pdf" href="#" id="pdf">PDF</a> |
   <a aria-labelledby="report-title doc" href="#" id="doc">Word</a> |
   <a aria-labelledby="report-title ppt" href="#" id="ppt">PowerPoint</a>
</p>

Pruebas

Procedimiento

Para cada enlace que tenga un atributo aria-labelledby:

Comprobar que cada id del valor del atributo aria-labelledby coincide con el id de un elemento de texto que forma parte del propósito del enlace.
Comprobar que el valor combinado del texto referenciado por el id o los id del atributo aria-labelledby describe adecuadamente el propósito del elemento de enlace.

Resultados esperados

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

Recursos

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