Técnica ARIA WCAG 2.2
ARIA13Usar aria-labelledby para nombrar regiones (landmarks)
En resumen
Cuando una página tiene varias regiones del mismo tipo (por ejemplo, dos bloques de navegación), los lectores de pantalla las anuncian de forma idéntica y resulta difícil distinguirlas. Esta técnica usa aria-labelledby para que un texto ya visible en la página, como un encabezado, sirva de nombre a la región. Aplíquela siempre que exista un texto en pantalla que describa la zona; si no lo hay, recurra a aria-label.
Aplicabilidad
Tecnologías que admiten Accessible Rich Internet Applications (WAI-ARIA).
Descripción
El propósito de esta técnica es proporcionar nombres para las regiones de una página que puedan ser leídos por las tecnologías de asistencia. El atributo aria-labelledby ofrece una forma de asociar una sección de la página marcada como región (region o landmark) con un texto presente en la página que la etiqueta.
Las funciones de región (o «regiones», landmarks) identifican por software las secciones de una página. Las regiones ayudan a quienes usan tecnologías de asistencia a orientarse en una página y a desplazarse con facilidad a sus distintas secciones.
Al igual que aria-describedby, aria-labelledby 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
Identificar una región con texto de la página
A continuación se muestra un ejemplo de aria-labelledby usado en una región complementary. La zona del documento a la que pertenece el encabezado puede marcarse con la propiedad aria-labelledby, cuyo valor es el id del encabezado.
<div role="complementary" aria-labelledby="hdr1">
<h1 id="hdr1">Top News Stories</h1>
...
</div>Identificación de regiones de tipo application
El siguiente fragmento de código corresponde a regiones de tipo application con prosa estática. Si tiene una región de tipo application y dispone de un texto descriptivo estático, incluya en la región application una referencia aria-describedby para asociar la aplicación con el texto estático, como se muestra aquí:
<div role="application" aria-labelledby="p123" aria-describedby="info">
<h1 id="p123">Calendar<h1>
<p id="info">This calendar shows the game schedule for the Boston Red Sox.</p>
<div role="grid">
...
</div>
</div>Pruebas
Procedimiento
- Examinar cada elemento con el atributo role=region o con una función de región (landmark) en el que también esté presente un atributo aria-labelledby.
- Comprobar que el valor del atributo aria-labelledby es el id de un elemento de la página.
- Comprobar que el texto del elemento con ese id etiqueta con precisión la sección de la página.
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
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 ARIA13 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.
