aria-live

Definizione — Le regioni aria-live sono aree del DOM marcate con l’attributo aria-live, usate per comunicare automaticamente alle tecnologie assistive gli aggiornamenti di contenuto senza dover spostare il focus. Sono cruciali per applicazioni dinamiche, messaggi di stato, errori di form, notifiche e caricamenti.

Valori comuni di aria-live

• aria-live="polite": gli aggiornamenti vengono annunciati quando l’utente è inattivo (per messaggi informativi non urgenti).
• aria-live="assertive": gli aggiornamenti interrompono subito la lettura corrente (per errori critici o alert urgenti).
• aria-live="off": default, nessun annuncio automatico.

Attributi correlati

• role="status": equivalente a aria-live="polite".
• role="alert": equivalente a aria-live="assertive".
• aria-atomic="true": annuncia tutta la regione, non solo la parte aggiornata.
• aria-relevant="additions removals text": specifica quali cambiamenti annunciare.

Esempi pratici

Messaggio di stato (polite):

<div role="status">Caricamento completato.</div>

Errore critico (assertive):

<div role="alert">Errore: connessione persa.</div>

Notifica aggiornata via JS:

<div id="notif" aria-live="polite"></div>
<script>
document.getElementById("notif").textContent = "Nuovo messaggio ricevuto.";
</script>

Buone pratiche

• Usa una sola regione assertive per pagina; troppe interruzioni rendono l’esperienza caotica.
• Associa sempre le notifiche ai campi di input se sono errori.
• Non abusare di aria-live per contenuti che cambiano di frequente (es. timer o ticker di news).