aria-label

¿Qué es aria-label?

aria-label es un atributo ARIA que proporciona un nombre accesible (accessible name) para un elemento cuando el texto visible no es suficiente o no existe. Este nombre es leído por lectores de pantalla y otras tecnologías de asistencia.

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 de usuario tengan un nombre accesible. aria-label es una forma de proporcionar este nombre.

Ejemplos prácticos

✅ Correcto: Botón con icono

<!-- Botón con solo icono -->
<button aria-label="Cerrar ventana">
  <span aria-hidden="true">×</span>
</button>

✅ Correcto: Enlace con imagen

<!-- Enlace que es solo una imagen -->
<a href="/buscar" aria-label="Buscar en el sitio">
  <img src="lupa.png" alt="" aria-hidden="true">
</a>

✅ Correcto: Botón de formulario sin texto

<!-- Botón de envío sin texto visible -->
<button type="submit" aria-label="Enviar formulario de contacto">
  <svg aria-hidden="true">...</svg>
</button>

❌ Incorrecto: Usar aria-label cuando hay texto visible

<!-- No usar aria-label si el texto es suficiente -->
<button aria-label="Enviar">Enviar</button>
<!-- El aria-label es redundante -->

❌ Incorrecto: Conflicto entre aria-label y label

<!-- No usar ambos al mismo tiempo -->
<label for="email">Correo</label>
<input type="email" id="email" aria-label="Email address">
<!-- aria-label sobrescribe el label -->

Prioridad del nombre accesible

El nombre accesible se calcula en este orden:

1. aria-labelledby (tiene prioridad)
2. aria-label
3. <label> asociado (mediante for o envolviendo)
4. Contenido textual del elemento
5. title (último recurso)

Errores comunes

1. Usar aria-label cuando hay texto visible: Solo usar cuando el texto no es descriptivo o no existe
2. Conflicto con label: No usar aria-label y label al mismo tiempo
3. Texto genérico: "Botón", "Enlace" no son descriptivos
4. Olvidar aria-hidden en iconos: Los iconos dentro deben tener aria-hidden="true"
5. No probar con lectores de pantalla: Verificar que el nombre se anuncia correctamente

Buenas prácticas

• Ser descriptivo: El aria-label debe describir la función, no solo el tipo
• Usar solo cuando sea necesario: Preferir texto visible o labels cuando sea posible
• Consistencia: Usar el mismo aria-label para elementos similares
• Probar con lectores de pantalla: Verificar que se anuncia correctamente
• No duplicar información: No repetir lo que ya es visible

Términos relacionados

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