Perché le live region non funzionano e come risolverle

Le live region sembrano semplici, ma spesso non funzionano. Conoscere i pitfalls più comuni fa risparmiare ore di test confusi con uno screen reader reale. 🐛

Se crea la regione e il relativo testo nello stesso momento, molti screen reader non la rilevano. La region deve esistere vuota prima della modifica.

Aggiunga il container live al caricamento della pagina senza testo, quindi ne aggiorni il contenuto in seguito. A quel punto lo screen reader lo sta già osservando.

Scrivere due volte la stessa stringa spesso produce silenzio, perché lo screen reader non rileva alcun cambiamento. Succede spesso con conteggi e stati ripetuti.

Svuoti la region, quindi imposti il nuovo testo al tick successivo. Questo breve reset fa sì che lo screen reader lo tratti come un nuovo annuncio.

Aggiornare una regione con un enorme blocco di testo sovraccarica l'utente. Le live region servono per brevi updates, non per il contenuto di un'intera pagina.

Imposti aria-atomic su true: a ogni modifica lo screen reader pronuncerà l'intera regione, non solo la parte aggiornata. È utile per i messaggi combinati.

L'attributo aria-relevant controlla quali tipi di modifica vengono annunciati, come aggiunte o rimozioni. Il valore predefinito, aggiunte più testo, è adatto alla maggior parte dei casi.

Una regione nascosta con display none viene rimossa dall'albero dell'accessibilità e resta silenziosa. È uno degli errori più comuni.

Gli inspector del browser non dimostrano che una regione funzioni. Verifichi sempre con uno screen reader reale, come NVDA o VoiceOver, prima della pubblicazione.

La stessa live region può essere pronunciata in modo diverso da screen reader e browser differenti. Provi un paio di combinazioni invece di fidarsi di una sola.

Ora sa eseguire il debug delle live region: esegua prima il rendering vuoto, svuoti e poi imposti per i valori ripetuti, eviti display none e testi sempre con uno screen reader reale. ✅