Stato Stato globale

`aria-busy`

Contrassegna una regione come in fase di aggiornamento, in modo che la tecnologia assistiva sopprima gli annunci intermedi. Impostare a "true" durante il caricamento o mentre sono in corso modifiche estese al DOM; riportare a "false" quando la regione è stabile.

Quando utilizzarlo

Quando una regione viene ricostruita in modo asincrono — un elenco di risultati di ricerca che si popola in streaming, una tabella che si riordina da sola, un pannello di chat in attesa di una risposta di rete. Senza aria-busy, gli screen reader collegati a una live region potrebbero annunciare ogni stato parziale non appena compare, il che risulta rumoroso e spesso confuso.

Il pattern è il seguente:

Impostare aria-busy="true" sul contenitore prima di iniziare a modificarlo.
Eseguire il lavoro (cancellare i figli, recuperare i dati, eseguire il re-render).
Impostare aria-busy="false" una volta che il DOM è stabile.

Se il contenitore è anche una live region (aria-live="polite" o aria-live="assertive"), lo screen reader trattiene gli annunci mentre aria-busy="true" è attivo e produce un singolo annuncio coerente dopo che aria-busy torna a "false".

Al di fuori di una live region l’attributo è comunque utile: segnala alla tecnologia assistiva che l’utente non dovrebbe interagire con il contenuto ancora, e si integra bene con gli indicatori di avanzamento.

Come mantenerlo sincronizzato

I valori validi sono "true" e "false". Il valore predefinito è "false" (o l’attributo può essere omesso).

L’attributo deve racchiudere la mutazione. L’errore comune è impostare aria-busy="true", modificare il DOM e dimenticare di riportarlo a "false" — la regione appare allora in stato di «caricamento» permanente per la tecnologia assistiva, anche se visivamente tutto è corretto.

È opportuno abbinarlo a un indicatore di caricamento visibile (spinner, scheletro, testo di avanzamento) affinché anche gli utenti vedenti ricevano lo stesso segnale. L’attributo aria-busy è destinato alla sola tecnologia assistiva; non produce alcun rendering autonomo.

Errori comuni

Impostare aria-busy="true" e non riportarlo mai a "false".
Impostare aria-busy dopo che la mutazione si è già verificata — troppo tardi, gli annunci intermedi sono già stati emessi.
Utilizzare aria-busy da solo senza aria-live e senza spinner visibile. Gli utenti vedenti non vedono nulla; gli utenti di tecnologia assistiva non sentono nulla.
Impostare aria-busy sull’intero <body> per tutta la durata dell’applicazione. L’ambito deve corrispondere alla regione che sta effettivamente cambiando.
Utilizzare aria-busy al posto di role="progressbar" per un indicatore di avanzamento determinato. I due sono complementari, non alternativi.
Dimenticare di disabilitare anche i controlli interattivi all’interno della regione occupata — gli utenti vedenti li vedono ancora e possono fare clic su di essi.

Esempio

<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>