Región en vivo

Una región en vivo es una parte del DOM que, cuando su contenido cambia, es anunciada automáticamente a los usuarios de lectores de pantalla — sin desplazar el foco, sin que el usuario tenga que navegar hasta ella y sin obligarle a actualizar la página.

Las regiones en vivo son el mecanismo que hay detrás de cada notificación «Toast: artículo añadido al carrito», de cada mensaje de validación de formulario «Error: el correo electrónico es obligatorio» y de cada actualización del recuento de resultados de búsqueda que un usuario de lector de pantalla realmente escucha.

El atributo básico

La región en vivo más sencilla es un div con aria-live="polite":

<div aria-live="polite" id="status">
  <!-- el contenido aquí se anunciará cuando cambie -->
</div>

Cuando JavaScript inserta texto en #status, el lector de pantalla anuncia el nuevo texto en la siguiente pausa natural, sin interrumpir lo que el usuario está leyendo en ese momento.

Polite frente a assertive

aria-live tiene dos valores operativos:

• polite — espera a que el usuario esté inactivo y entonces anuncia. Se usa para la mayoría de las notificaciones: confirmaciones, recuentos de búsqueda, mensajes de estado.
• assertive — interrumpe la lectura actual del usuario y anuncia de inmediato. Se usa únicamente para mensajes genuinamente urgentes: errores críticos, avisos de expiración de sesión, alertas con límite de tiempo.

El uso excesivo de assertive es el fallo más frecuente en regiones en vivo. Cada toast menor que dispara assertive convierte el lector de pantalla en un interruptor constante, entrenando al usuario a desactivar la región en vivo por completo.

Alternativas basadas en roles ARIA

Varios roles ARIA implican aria-live de forma automática:

• role="alert" → se comporta como aria-live="assertive".
• role="status" → se comporta como aria-live="polite".
• role="log" → polite, con la indicación conceptual de un registro de solo anexión (historial de chat, salida de consola).
• role="timer" → polite, para temporizadores de cuenta atrás.

Elegir un rol suele ser más claro que especificar directamente un valor de aria-live — documenta el propósito de la región.

Qué falla en la práctica

• La región en vivo se añade al mismo tiempo que el contenido. ARIA solo anuncia cambios en regiones en vivo que ya existían en el DOM. Insertar <div aria-live="polite">Cargado</div> como un bloque único no anuncia nada — la región y el contenido llegaron juntos. Solución: mantener la región en vivo vacía en el DOM desde la carga de la página y poblarla más adelante.
• Actualizaciones demasiado rápidas. Insertar texto en una región en vivo varias veces por segundo descarta el anuncio anterior antes de que termine. El usuario escucha fragmentos. Se recomienda aplicar throttle o debounce a las actualizaciones.
• Anuncios gestionados por modales que deberían usar el foco en su lugar. Si la acción intencional del usuario desencadenó el mensaje, mover el foco al mensaje (o a un control relacionado) suele ser mejor que depender de un anuncio de región en vivo. Las regiones en vivo son para notificaciones pasivas.
• Ruido decorativo en la región en vivo. Una región en vivo que contiene indicadores de carga, iconos y marcas de tiempo además del mensaje lleva al lector de pantalla a leer todo ello en cada actualización. Se debe limitar el contenido de la región exclusivamente al mensaje.