Regione live

Una regione live è una parte del DOM che, quando il suo contenuto cambia, viene annunciata automaticamente agli utenti di screen reader — senza spostare il focus, senza richiedere all’utente di navigare verso di essa e senza costringerlo ad aggiornare la pagina.

Le regioni live sono il meccanismo alla base di ogni notifica «Toast: Articolo aggiunto al carrello», di ogni messaggio di validazione «Errore: il campo email è obbligatorio», di ogni aggiornamento del numero di risultati di ricerca che un utente di screen reader effettivamente ascolta.

L’attributo di base

La regione live più semplice è un div con aria-live="polite":

<div aria-live="polite" id="status">
  <!-- il contenuto qui verrà annunciato quando cambia -->
</div>

Quando JavaScript inserisce del testo in #status, lo screen reader annuncia il nuovo testo alla prossima pausa naturale — senza interrompere ciò che l’utente sta leggendo in quel momento.

Polite vs assertive

aria-live ha due valori operativi:

• polite — aspetta che l’utente sia inattivo, poi annuncia. Da usare per la maggior parte delle notifiche: conferme, conteggi di risultati, messaggi di stato.
• assertive — interrompe la lettura corrente dell’utente e annuncia immediatamente. Da usare solo per messaggi genuinamente urgenti: errori critici, avvisi di scadenza della sessione, avvisi sensibili al tempo.

L’uso eccessivo di assertive è il singolo errore più comune nelle regioni live. Ogni piccolo toast che attiva assertive trasforma lo screen reader in un interruttore continuo, inducendo l’utente a disabilitare del tutto la regione live.

Alternative derivate da ARIA

Diversi ruoli ARIA implicano aria-live automaticamente:

• role="alert" → si comporta come aria-live="assertive".
• role="status" → si comporta come aria-live="polite".
• role="log" → polite, con il suggerimento concettuale di un log solo in aggiunta (cronologia chat, output della console).
• role="timer" → polite, per i timer a conto alla rovescia.

Scegliere un ruolo è spesso più chiaro che scegliere direttamente un valore aria-live — documenta lo scopo della regione.

Cosa va storto in pratica

• La regione live aggiunta contemporaneamente al contenuto. ARIA annuncia solo le modifiche alle regioni live che esistevano già nel DOM. Inserire <div aria-live="polite">Caricato</div> come un blocco unico non genera alcun annuncio — la regione e il contenuto sono arrivati insieme. Soluzione: mantenere la regione live vuota nel DOM dal caricamento della pagina e popolarla in seguito.
• Aggiornamenti troppo rapidi. Inserire testo in una regione live più volte al secondo interrompe l’annuncio precedente prima che finisca. L’utente sente frammenti. Occorre limitare o ridurre con debounce gli aggiornamenti.
• Annunci gestiti da modal che dovrebbero usare il focus. Se l’azione intenzionale dell’utente ha generato il messaggio, spostare il focus sul messaggio (o su un controllo correlato) è spesso preferibile all’affidamento a un annuncio di regione live. Le regioni live servono per le notifiche passive.
• Rumore decorativo nella regione live. Una regione live che contiene spinner di caricamento, icone e timestamp oltre al messaggio induce lo screen reader a leggere tutto questo ad ogni aggiornamento. È opportuno limitare il contenuto della regione al solo messaggio.