Estado Estado global

`aria-busy`

Marca una región como en proceso de actualización para que la tecnología de asistencia suprima los anuncios intermedios. Se establece en "true" mientras se carga o mientras se producen cambios importantes en el DOM; debe volver a "false" cuando la región sea estable.

Cuándo utilizarlo

Cuando una región se está reconstruyendo de forma asíncrona — una lista de resultados de búsqueda que aparece en streaming, una tabla que se reordena, un panel de chat a la espera de una respuesta de red. Sin aria-busy, los lectores de pantalla conectados a una región dinámica pueden anunciar cada estado parcial a medida que aparece, lo cual resulta ruidoso y con frecuencia confuso.

El patrón es el siguiente:

Establezca aria-busy="true" en el contenedor antes de comenzar a mutarlo.
Realice el trabajo (limpie los hijos, obtenga los datos, vuelva a renderizar).
Establezca aria-busy="false" una vez que el DOM sea estable.

Si el contenedor también es una región dinámica (aria-live="polite" o aria-live="assertive"), el lector de pantalla retiene los anuncios mientras aria-busy="true" y produce un único anuncio coherente después de que aria-busy vuelva a cambiar.

Fuera de una región dinámica el atributo sigue siendo útil: indica a la tecnología de asistencia que el usuario no debe interactuar aún con el contenido, y funciona bien junto con los indicadores de progreso.

Cómo mantenerlo sincronizado

Los valores válidos son "true" y "false". El valor predeterminado es "false" (o se puede omitir).

El atributo debe envolver la mutación. El error habitual consiste en establecer aria-busy="true", mutar el DOM y olvidar restablecerlo — la región aparece entonces permanentemente en estado «cargando» ante la tecnología de asistencia aunque visualmente todo sea correcto.

Combínelo con un indicador de carga visible (spinner, esqueleto, texto de progreso) para que los usuarios videntes reciban la misma señal. El atributo aria-busy es solo para la tecnología de asistencia; por sí mismo no renderiza nada.

Errores habituales

Establecer aria-busy="true" y no volver a establecerlo en "false".
Establecer aria-busy después de que la mutación ya ha ocurrido — demasiado tarde, los anuncios intermedios ya se han emitido.
Usar aria-busy sin aria-live ni spinner visible. Los usuarios videntes no ven nada; los usuarios de tecnología de asistencia no escuchan nada.
Establecer aria-busy en todo el <body> durante toda la vida de la aplicación. El ámbito debe coincidir con la región que realmente está cambiando.
Usar aria-busy en lugar de role="progressbar" para un indicador de progreso determinado. Los dos son complementarios, no alternativas.
Olvidar desactivar también los controles interactivos dentro de la región ocupada — los usuarios videntes todavía los ven y pueden hacer clic en ellos.

Ejemplo

<section
  id="results"
  aria-live="polite"
  aria-busy="true"
>
  <p>Loading results…</p>
</section>

<script>
  fetch('/api/search')
    .then((r) => r.json())
    .then((data) => {
      const region = document.getElementById('results');
      region.innerHTML = renderResults(data);
      region.setAttribute('aria-busy', 'false');
    });
</script>