Annunciare toast, indicatori di caricamento e conteggi
Rendere udibili i cambiamenti asincroni dell'interfaccia
Annunciare toast, indicatori di caricamento e conteggi è una lezione Web Accessibility Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Web Accessibility Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Web Accessibility Academy include 4 lezioni in totale.
L'interfaccia asincrona ha bisogno di una voce
Toast, spinner e conteggi dei risultati modificano la pagina senza ricaricarla. Senza una live region, gli utenti di screen reader non li percepiscono affatto.
I toast devono essere annunciati
Un toast è un breve messaggio popup. Assegni al suo contenitore il ruolo status, così lo screen reader pronuncia il testo quando compare. 🍞
<div role="status">Item added to cart</div>Mantenga persistente la regione dei toast
Visualizzi al caricamento una sola regione toast vuota e vi inserisca i messaggi. Creare ogni volta una nuova regione spesso impedisce l'annuncio.
<div id="toasts" role="status"></div>I loader dicono all'utente di attendere
Quando i dati sono in caricamento, lo annunci. Un messaggio status discreto come Caricamento dei risultati informa l'utente invece di lasciarlo indovinare. ⏳
out.textContent = 'Loading results';Poi annunci la fine
Al termine del caricamento, aggiorni la stessa region con il risultato. Abbinare un messaggio iniziale e uno finale dà una chiara percezione dell'avanzamento.
out.textContent = 'Results loaded';Annunci i conteggi dei risultati
Dopo una ricerca o un filtro, annunci quanti elementi corrispondono. Un breve messaggio di count orienta gli utenti che non possono scorrere visivamente la pagina.
out.textContent = '12 results found';I conteggi sono meglio del silenzio
Aggiornare un elenco di risultati senza un count lascia gli utenti di screen reader incerti sul fatto che sia cambiato qualcosa. Basta pronunciare un numero.
Mantenga brevi i messaggi
Gli annunci live interrompono il flusso di lettura, quindi mantenga conciso ogni message. Salvato è meglio di Le modifiche sono state salvate correttamente proprio ora.
Renda distinto ogni aggiornamento
Se il nuovo testo è identico al precedente, alcuni screen reader restano silenziosi. Vari la formulazione oppure prima svuoti la regione per forzare una nuova lettura.
Non nasconda con display none
Una live region impostata su display none non viene annunciata. Per nasconderla visivamente, usi una classe visually-hidden che la mantenga nell'albero dell'accessibilità.
Una regione, molti messaggi
Di solito basta una sola region discreta per i toast e i conteggi dell'intera app. Faccia passare gli aggiornamenti da lì invece di distribuirli in molti elementi live.
Verifica rapida
La sua regione dei toast non viene mai annunciata. Il CSS la nasconde con display none. Qual è la soluzione più probabile?
Riepilogo: annunciare l'interfaccia asincrona
Ha imparato ad annunciare toasts, loader e conteggi tramite una regione discreta persistente, mantenendo brevi i messaggi e non usando mai display none. ✅
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 30
- Lezioni
- 120
Domande Frequenti
La lezione «Annunciare toast, indicatori di caricamento e conteggi» è gratuita?
Sì — il testo completo di «Annunciare toast, indicatori di caricamento e conteggi» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Web Accessibility Academy, passa a CoddyKit PRO. Il corso Web Accessibility Academy include 4 lezioni in totale.
Cosa imparerò in «Annunciare toast, indicatori di caricamento e conteggi»?
Rendere udibili i cambiamenti asincroni dell'interfaccia Eserciti Web Accessibility Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Web Accessibility Academy?
Non è richiesta alcuna esperienza precedente. Web Accessibility Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Annunciare toast, indicatori di caricamento e conteggi»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Web Accessibility Academy?
Sì. Ogni lezione Web Accessibility Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- polite o assertive: scegliere l'urgenza
- Ruoli status, alert e log
- Annunciare toast, indicatori di caricamento e conteggi
- Perché le live region non funzionano e come risolverle