ARIA live

¿Qué es ARIA live?

ARIA live es un atributo que marca regiones del contenido que se actualizan dinámicamente y que deben ser anunciadas a los usuarios de lectores de pantalla. Esto es esencial para contenido que cambia sin recargar la página, como mensajes de error, notificaciones, actualizaciones de estado, etc.

Valores de aria-live

1. aria-live="off" (por defecto): No se anuncian cambios
2. aria-live="polite": Se anuncian cambios cuando el lector de pantalla termine de hablar
3. aria-live="assertive": Se anuncian cambios inmediatamente, interrumpiendo el habla actual

Relación con WCAG 2.1

El Criterio 4.1.3 (Mensajes de Estado) de WCAG 2.1 Nivel AA requiere que los mensajes de estado se presenten a los usuarios mediante roles o propiedades que puedan ser determinados programáticamente por tecnologías de asistencia.

Ejemplos prácticos

✅ Correcto: Mensaje de error con aria-live

<form>
  <label for="email">Correo electrónico</label>
  <input type="email" id="email" aria-describedby="error-message">
  <span id="error-message" role="alert" aria-live="polite"></span>
</form>

<script>
  document.getElementById('email').addEventListener('blur', function() {
    const errorSpan = document.getElementById('error-message');
    if (!this.validity.valid) {
      errorSpan.textContent = 'Por favor, ingresa un correo electrónico válido';
    } else {
      errorSpan.textContent = '';
    }
  });
</script>

✅ Correcto: Notificación con aria-live

<div id="notificacion" role="status" aria-live="polite" aria-atomic="true">
  <!-- El contenido se actualiza dinámicamente -->
</div>

<script>
  function mostrarNotificacion(mensaje) {
    const notificacion = document.getElementById('notificacion');
    notificacion.textContent = mensaje;
    // El lector de pantalla anunciará el cambio automáticamente
  }
</script>

✅ Correcto: Actualización crítica con assertive

<div id="alerta-critica" role="alert" aria-live="assertive">
  <!-- Para mensajes críticos que deben interrumpir -->
</div>

❌ Incorrecto: Cambio sin anuncio

<!-- El cambio no se anuncia a lectores de pantalla -->
<div id="contador">0</div>
<script>
  setInterval(() => {
    document.getElementById('contador').textContent = 
      parseInt(document.getElementById('contador').textContent) + 1;
  }, 1000);
</script>

Atributos relacionados

• aria-atomic: Indica si todo el contenido de la región debe anunciarse o solo los cambios
• aria-relevant: Indica qué tipos de cambios son relevantes (additions, removals, text, all)
• role="alert": Equivalente a aria-live="assertive"
• role="status": Equivalente a aria-live="polite"

Errores comunes

1. Usar assertive innecesariamente: Interrumpe al usuario, usar solo para mensajes críticos
2. No usar aria-atomic: Puede causar anuncios confusos si solo se lee parte del contenido
3. Actualizar contenido sin aria-live: Los cambios dinámicos no se anuncian
4. Usar aria-live en contenido estático: No es necesario y puede causar anuncios innecesarios
5. No limpiar contenido: Dejar mensajes antiguos puede confundir

Buenas prácticas

• Usar polite por defecto: Solo usar assertive para mensajes críticos
• Establecer aria-live antes de actualizar: El atributo debe estar presente cuando se carga la página
• Usar aria-atomic="true": Para asegurar que se anuncie el mensaje completo
• Limpiar contenido: Eliminar mensajes antiguos antes de añadir nuevos
• Probar con lectores de pantalla: Verificar que los anuncios funcionan correctamente

Términos relacionados

• [[role="alert"]]
• [[role="status"]]
• [[aria-atomic]]
• [[aria-relevant]]
• [[WCAG 2.1]]
• [[Criterio 4.1.3]]