aria-labelledby

¿Qué es aria-labelledby?

aria-labelledby es un atributo ARIA que referencia el ID de uno o más elementos del DOM que proporcionan el nombre accesible (accessible name) para el elemento actual. Tiene prioridad sobre aria-label y <label>.

Relación con WCAG 2.1

El Criterio 4.1.2 (Nombre, Rol, Valor) de WCAG 2.1 Nivel A requiere que todos los componentes de interfaz tengan un nombre accesible. aria-labelledby es una forma de proporcionar este nombre cuando el label está separado del control.

Ejemplos prácticos

✅ Correcto: Label separado del input

<!-- Label en otro lugar del DOM -->
<div class="form-group">
  <span id="email-label">Correo electrónico</span>
  <input type="email" aria-labelledby="email-label">
</div>

✅ Correcto: Múltiples referencias

<!-- Combinar múltiples elementos para el nombre -->
<div>
  <span id="required-indicator">*</span>
  <span id="field-name">Nombre completo</span>
</div>
<input type="text" aria-labelledby="required-indicator field-name">

✅ Correcto: Sección con título

<!-- Sección identificada por su título -->
<section aria-labelledby="section-title">
  <h2 id="section-title">Información de contacto</h2>
  <!-- Contenido -->
</section>

❌ Incorrecto: Referencia a ID inexistente

<!-- El ID referenciado no existe -->
<input type="email" aria-labelledby="email-label">
<!-- email-label no existe en el DOM -->

❌ Incorrecto: Referencia circular

<!-- Referencia circular -->
<div id="container" aria-labelledby="container">
  <!-- Esto causa problemas -->
</div>

Prioridad del nombre accesible

El nombre accesible se calcula en este orden:

1. aria-labelledby (máxima prioridad)
2. aria-label
3. <label> asociado
4. Contenido textual
5. title

Errores comunes

1. ID inexistente: Referenciar un ID que no existe en el DOM
2. Referencias circulares: Crear bucles de referencias
3. IDs duplicados: Múltiples elementos con el mismo ID
4. No actualizar cuando cambia: Si el label cambia, el nombre accesible puede quedar desactualizado
5. Conflicto con aria-label: No usar ambos al mismo tiempo

Buenas prácticas

• Verificar IDs: Asegurar que los IDs referenciados existen
• IDs únicos: Cada ID debe ser único en la página
• Actualizar dinámicamente: Si el contenido cambia, actualizar las referencias
• Probar con lectores de pantalla: Verificar que el nombre se anuncia correctamente
• Usar para relaciones complejas: Útil cuando el label está lejos del control

Términos relacionados

• [[aria-label]]
• [[Nombre accesible]]
• [[aria-describedby]]
• [[Label]]
• [[WCAG 2.1]]
• [[Criterio 4.1.2]]