Messaggi di stato

Silktide ti chiede di verificare che i messaggi di stato — toast, snackbar, banner di notifica, messaggi di conferma ed errore — siano configurati in modo che i li annuncino quando compaiono.

Si tratta di una : l'automazione non può stabilire in modo affidabile quali elementi siano superfici di stato (i nomi delle classi, le lingue e il markup minimizzato variano continuamente), quindi Silktide mostra il prompt su ogni pagina e una persona lo conferma.

<!-- Silenzioso: i lettori di schermo non lo annunceranno quando compare -->
<div class="toast">Elemento aggiunto al carrello</div>

<!-- Annunciato: role="status" lo rende una regione live -->
<div class="toast" role="status">Elemento aggiunto al carrello</div>

Perché è importante

I messaggi di stato comunicano l'esito di ciò che un utente ha appena fatto: "Modulo salvato", "Elemento aggiunto al carrello", "Trovati 3 risultati", "Qualcosa è andato storto". Gli utenti vedenti notano che compaiono; un lettore di schermo legge ciò che al momento ha il focus, mentre un messaggio che compare altrove nella pagina non comunica nulla. L'utente invia un modulo e non sente nulla: non può capire se l'operazione è riuscita, non è riuscita o è ancora in caricamento.

Contrassegnare il messaggio come indica alla di annunciarlo nel momento in cui compare, senza spostare il focus dell'utente.

Cosa controllare

Individua ogni superficie di stato nella pagina (toast, snackbar, messaggi flash, banner di conferma/errore incorporati e aggiornamenti del conteggio dei risultati).
Verifica che ciascuna di esse — oppure un contenitore permanente in cui scrive — abbia role="status", role="alert", role="log" oppure aria-live="polite" / aria-live="assertive".
Preferisci un contenitore di regione live presente al caricamento della pagina; inserisci a runtime solo il testo del messaggio. Le regioni live create nello stesso momento del messaggio spesso non vengono annunciate.

Se la pagina non contiene messaggi di stato o se tutti vengono annunciati correttamente, il risultato.

Come risolvere il problema

Aggiungi un ruolo di regione live al contenitore del messaggio:
- role="status" per aggiornamenti ordinari, come conferme e conteggi dei risultati.
- role="alert" per messaggi importanti e urgenti, come gli errori.
In alternativa, usa direttamente l'attributo : aria-live="polite" (attende una pausa nel parlato) oppure aria-live="assertive" (interrompe immediatamente).

Come Silktide verifica questo aspetto

Silktide non può rilevare in modo affidabile automaticamente le superfici di stato: dedurre la loro presenza dai nomi delle classi crea una falsa sicurezza e non individua il markup generato o in lingue diverse dall'inglese. Perciò questo controllo mostra un prompt di revisione per ogni pagina, descrivendo cosa verificare.