Etiquetas ARIA: Proporcionando Nombres Accesibles para Elementos Interactivos

Introducción

Las etiquetas ARIA proporcionan nombres accesibles para elementos que los lectores de pantalla anuncian a los usuarios. Cuando el HTML nativo no proporciona un nombre claro—como botones solo con íconos o widgets personalizados—los atributos ARIA llenan el vacío. WCAG 4.1.2 requiere que todos los componentes de interfaz de usuario tengan nombres determinables programáticamente, haciendo el etiquetado ARIA esencial para la accesibilidad.

Sin nombres accesibles apropiados, los usuarios de lectores de pantalla escuchan anuncios sin sentido como “botón” o “enlace” sin entender qué hace el elemento. Las etiquetas ARIA aseguran que cada elemento interactivo comunique su propósito claramente.

Entendiendo los Nombres Accesibles

¿Qué Es un Nombre Accesible?

Un nombre accesible es el texto que las tecnologías asistivas anuncian cuando un usuario enfoca un elemento. Puede venir de varias fuentes:

Fuente	Prioridad	Ejemplo
aria-labelledby	Más alta	Referencia texto de otro elemento
aria-label	Alta	Texto de etiqueta directo
Elemento <label>	Media	Etiquetas de campos de formulario
Contenido del elemento	Baja	Texto dentro de botones/enlaces
Atributo title	Más baja	Opción de último recurso

El Cálculo del Nombre

Los navegadores usan un algoritmo específico para determinar nombres accesibles:

<!-- 1. aria-labelledby gana (prioridad más alta) -->
<button aria-labelledby="btn-label">
  <svg>...</svg>
</button>
<span id="btn-label">Buscar productos</span>
<!-- Anunciado: "Buscar productos, botón" -->

<!-- 2. aria-label es siguiente -->
<button aria-label="Buscar productos">
  <svg>...</svg>
</button>
<!-- Anunciado: "Buscar productos, botón" -->

<!-- 3. Contenido tiene prioridad menor -->
<button>
  <svg aria-hidden="true">...</svg>
  Buscar
</button>
<!-- Anunciado: "Buscar, botón" -->

Atributos de Etiquetado ARIA

aria-label

Proporciona una cadena directamente como nombre accesible:

<!-- Botón solo con ícono -->
<button aria-label="Cerrar diálogo">
  <svg aria-hidden="true"><!-- ícono X --></svg>
</button>

<!-- Input de búsqueda -->
<input type="search" aria-label="Buscar productos">

Mejor para:

• Botones solo con íconos
• Inputs sin etiquetas visibles
• Elementos donde el contexto visual es claro

Limitaciones:

• No traducible por herramientas de traducción del navegador
• No visible para usuarios videntes

aria-labelledby

Referencia el texto de otro elemento como etiqueta:

<!-- Usando encabezado existente -->
<h2 id="section-title">Carrito de Compras</h2>
<nav aria-labelledby="section-title">
  <!-- Navegación dentro del carrito -->
</nav>

<!-- Múltiples elementos -->
<span id="label">Correo</span>
<span id="hint">(requerido)</span>
<input type="email" aria-labelledby="label hint">
<!-- Anunciado: "Correo (requerido)" -->

Mejor para:

• Cuando el texto de la etiqueta ya existe visualmente
• Combinar múltiples fuentes de texto
• Secciones etiquetadas por encabezados

aria-describedby

Proporciona descripción suplementaria (no el nombre principal):

<label for="password">Contraseña</label>
<input type="password" id="password" aria-describedby="pwd-help">
<p id="pwd-help">Debe tener al menos 8 caracteres con un número</p>
<!-- Anunciado: "Contraseña, editar texto, Debe tener al menos 8 caracteres..." -->

Diferencia con labelledby:

• aria-labelledby = nombre principal (anunciado primero)
• aria-describedby = descripción adicional (anunciada después)

Casos de Uso Comunes de Etiquetas ARIA

Botones con Íconos

<!-- Íconos de redes sociales -->
<a href="https://twitter.com/company" aria-label="Síguenos en Twitter">
  <svg aria-hidden="true"><!-- ícono Twitter --></svg>
</a>

<button aria-label="Agregar a favoritos">
  <svg aria-hidden="true"><!-- ícono corazón --></svg>
</button>

Landmarks de Navegación

<!-- Múltiples elementos nav necesitan distinción -->
<nav aria-label="Navegación principal">
  <!-- Navegación primaria -->
</nav>

<nav aria-label="Navegación de pie de página">
  <!-- Enlaces del footer -->
</nav>

<nav aria-label="Migas de pan">
  <!-- Ruta de breadcrumb -->
</nav>

Regiones de Formulario

<section aria-labelledby="shipping-title">
  <h2 id="shipping-title">Información de Envío</h2>
  <!-- Campos de formulario de envío -->
</section>

<section aria-labelledby="billing-title">
  <h2 id="billing-title">Información de Facturación</h2>
  <!-- Campos de formulario de facturación -->
</section>

Widgets Personalizados

<!-- Calificación con estrellas -->
<div role="slider"
     aria-label="Calificación"
     aria-valuemin="1"
     aria-valuemax="5"
     aria-valuenow="4">
  <!-- Íconos de estrellas -->
</div>

<!-- Interruptor toggle -->
<button role="switch"
        aria-checked="false"
        aria-label="Modo oscuro">
  <!-- Visual del toggle -->
</button>

Errores Comunes de Etiquetado

1. Etiquetas Faltantes

<!-- MAL: Sin nombre accesible -->
<button>
  <svg><!-- ícono --></svg>
</button>
<!-- Anunciado: "botón" - ¡sin sentido! -->

<!-- BIEN: Tiene nombre accesible -->
<button aria-label="Eliminar elemento">
  <svg aria-hidden="true"><!-- ícono --></svg>
</button>

2. Etiquetas Redundantes

<!-- MAL: Información redundante -->
<button aria-label="Botón enviar">Enviar</button>
<!-- Anunciado: "Botón enviar, botón" - "botón" se dice dos veces -->

<!-- BIEN: Dejar que el contenido sea el nombre -->
<button>Enviar</button>
<!-- Anunciado: "Enviar, botón" -->

3. Etiquetas Que No Coinciden con Texto Visible

<!-- MAL: Diferente del texto visible -->
<button aria-label="Enviar mensaje">Enviar Formulario</button>
<!-- Usuarios de control por voz dicen "click Enviar Formulario" pero no funcionará -->

<!-- BIEN: Coincidir o incluir texto visible -->
<button aria-label="Enviar Formulario - envía tu mensaje">Enviar Formulario</button>

4. Usar aria-label en Elementos No Interactivos

<!-- MAL: aria-label en div (lectores de pantalla pueden ignorar) -->
<div aria-label="Sección importante">Contenido aquí</div>

<!-- BIEN: Usar en landmarks o elementos interactivos -->
<section aria-label="Sección importante">Contenido aquí</section>

Probando Etiquetas ARIA

Prueba Manual Rápida

1. Abrir DevTools del navegador
2. Inspeccionar un elemento
3. Verificar el panel de Accesibilidad
4. Buscar propiedad “Name”
5. Verificar que tenga sentido

Usando Lectores de Pantalla

Lector de Pantalla	Comando
NVDA	Tab al elemento, escuchar
VoiceOver	VO+Flecha derecha
JAWS	Tab al elemento
Narrator	Tab al elemento

Herramientas Automatizadas

• axe DevTools - Reporta nombres accesibles faltantes
• WAVE - Resalta elementos sin etiquetar
• Lighthouse - Verifica nombres accesibles
• DevTools del navegador - Muestra nombre accesible calculado

Resumen de Mejores Prácticas

Hacer	No Hacer
Usar aria-label para elementos solo con íconos	Poner aria-label en divs no interactivos
Usar aria-labelledby cuando existe texto	Duplicar texto visible en aria-label
Hacer etiquetas concisas pero claras	Escribir etiquetas demasiado largas
Empezar con verbo de acción para botones	Incluir tipo de elemento en la etiqueta
Probar con lectores de pantalla reales	Asumir que claridad visual = accesibilidad

Cuándo Usar Cada Atributo

Situación	Usar
Botón solo con ícono	aria-label
Etiqueta visual existente cerca	aria-labelledby
Campo de formulario sin etiqueta visible	aria-label
Texto de ayuda adicional	aria-describedby
Múltiples landmarks de navegación	aria-label en cada uno
Sección con encabezado	aria-labelledby al encabezado

Artículos Relacionados

• Guía de Implementación de Etiquetas ARIA - Patrones detallados
• Guía de Etiquetas de Formulario - Etiquetado nativo
• Hub de Componentes Accesibles - Guía completa

---

Referencias

1. W3C - WCAG 2.2 SC 4.1.2 Name, Role, Value
2. W3C - Accessible Name Computation
3. WebAIM - ARIA
4. MDN - Using aria-label