alert
Una live region che trasmette un messaggio urgente e sensibile al tempo. Gli screen reader lo annunciano immediatamente, interrompendo il parlato in corso. Da usare con parsimonia — riservare a errori e avvertimenti genuini; l'abuso causa affaticamento da tecnologia assistiva.
Quando usarlo
Per i messaggi che interrompono genuinamente l’utente — un invio di modulo fallito, una sessione in procinto di scadere, una connessione persa. role="alert" è equivalente a aria-live="assertive" più aria-atomic="true", il che significa che lo screen reader interrompe quanto sta annunciando e legge l’alert successivamente.
Va usato con parsimonia. Gli annunci assertivi interrompono il compito corrente dell’utente; attivarli per ogni campo salvato o azione completata con successo è controproducente. Per i cambiamenti di stato non urgenti, si utilizza invece role="status" (aria-live="polite").
La regola più importante: l’elemento alert DEVE esistere nel DOM prima che il messaggio venga inserito, e il contenuto DEVE essere aggiunto (non semplicemente reso visibile dopo essere stato nascosto) affinché l’annuncio si attivi. Inserire <div role="alert">Errore</div> da zero non è affidabile tra i vari screen reader. Il pattern sicuro consiste nel renderizzare un <div role="alert"></div> vuoto al caricamento della pagina, quindi aggiornarne il contenuto testuale quando si verifica un alert.
Quando usare alert vs. status
Usare role="alert" | Usare role="status" |
|---|---|
| Errori di validazione del modulo | «Articolo aggiunto al carrello» |
| Sessione in procinto di scadere | Conteggio dei risultati di ricerca aggiornato |
| Connessione persa | Indicatore «Salvato» |
| Pagamento fallito | Caricamento completato |
Errori comuni
- Elemento alert aggiunto al DOM dopo il messaggio — molti screen reader non annunciano.
- Attivare/disattivare
hiddensu un alert pre-popolato. È la variazione del contenuto testuale a innescare l’annuncio; la sola variazione di visibilità potrebbe non farlo. - Usare
role="alert"per stati di routine. Sommerge l’utente di interruzioni. - Più alert inseriti rapidamente — i messaggi successivi vengono accodati dietro a quelli precedenti, a volte per decine di secondi.
- Un messaggio di alert che non indica il campo o la causa — «Errore» da solo è inutile. «L’indirizzo email è obbligatorio.» è un’indicazione concreta.
- Inserire
role="alert"su un wrapper attorno a un modulo, aspettandosi che le modifiche interne vengano annunciate. Solo le variazioni di testo sull’elemento alert stesso attivano l’annuncio.
Esempio
<!-- Renderizzare vuoto al caricamento della pagina -->
<div role="alert" id="formErr"></div>
<script>
// In caso di mancato invio:
document.getElementById('formErr').textContent =
'L\'indirizzo email è obbligatorio.';
</script>