Accessibilità
aria-live per gli errori di form
Un errore di form si annuncia con una live region già nel DOM e aria-invalid sul campo. Lo chiede il criterio 4.1.3 Status Messages, livello AA.
In sintesi
- La live region deve esistere prima dell'errore: se la crei insieme al testo, l'annuncio può non partire.
- role="alert" equivale ad aria-live="assertive"; usalo per l'invio, non per ogni tasto.
- Collega il messaggio con aria-describedby e marca il campo con aria-invalid="true".
Un errore di form accessibile si annuncia da una live region che era già nel DOM, mentre il campo riceve aria-invalid="true" e un aria-describedby verso il messaggio. Il criterio 4.1.3 Status Messages, livello AA, chiede che il messaggio sia annunciato senza spostare il focus.
Il markup
Email
Create account
Due regioni con compiti diversi. aria-live="polite" sul campo annuncia l'errore mentre l'utente completa il resto del form. role="alert" sul riepilogo di invio interrompe e comunica quanti campi correggere; è implicito aria-live="assertive" e aria-atomic="true".
Perché la regione deve esistere prima
Le tecnologie assistive osservano i nodi che hanno già un ruolo live. Se il contenitore viene creato nello stesso istante in cui compare il testo, l'osservatore può non registrarlo e l'annuncio non parte. La soluzione è lasciare il contenitore vuoto nel markup e cambiare solo textContent. Alcuni lettori annunciano anche un nodo inserito, ma il comportamento varia con browser e versione.
Errore e stato del campo
Il criterio 3.3.1 Error Identification, livello A, chiede che l'errore sia descritto nel testo e non solo con il colore. aria-invalid="true" comunica lo stato al lettore; aria-describedby lega il messaggio al campo, così l'utente lo risente quando torna sull'input. Il criterio 3.3.3 Error Suggestion, livello AA, chiede una correzione possibile: «Inserisci un indirizzo con la chiocciola», non «Valore non valido».
Il test che conta
Compila il form con un errore e invia senza guardare lo schermo. Con NVDA o VoiceOver devi sentire il messaggio una volta, senza che il focus salti altrove. Poi torna sul campo con Shift+Tab: il messaggio deve essere riletto grazie ad aria-describedby.
npx --yes @axe-core/cli https://example.comaxe-core è open source con licenza MPL-2.0. Lo strumento trova campi senza nome e attributi non validi, non l'ordine degli annunci: una live region montata tardi passa il test e resta muta.
Il catalogo EneUI
EneUI indicizza la validazione dei form, i campi e il record popover form di Cult UI, licenza MIT dichiarata a monte: un form dentro un pannello, il caso in cui la live region deve stare nel nodo che resta montato. Verifica del 1 novembre 2026 sul catalogo da 111.985 componenti.
La limitazione
Una live region annuncia il cambiamento, non lo spiega. Se l'utente è in modalità browse e non ha il focus sul form, l'annuncio può arrivare senza contesto: serve anche un riepilogo con link ai campi. E nessun attributo sostituisce la validazione lato server, che resta obbligatoria.
Dove continuare
La checklist operativa è in componenti React accessibili; la mappa dei ruoli è in che cos'è ARIA. Il confronto tra primitive headless è in Radix, Base UI e React Aria.
Domande frequenti
role alert o aria-live polite?
Dipende dall'urgenza. role="alert" interrompe la lettura in corso ed è adatto al riepilogo di invio; aria-live="polite" aspetta una pausa ed è adatto all'errore di un singolo campo.
Posso creare il messaggio insieme al contenitore?
Meglio di no. La regione deve esistere nel DOM prima dell'errore, altrimenti alcuni lettori non registrano il cambiamento. Lascia il contenitore vuoto e aggiorna solo il testo.
Serve aria-invalid sul campo?
Sì. Comunica lo stato del campo al lettore di schermo e va riportato a false quando l'errore è risolto. Da solo non basta: il messaggio va collegato con aria-describedby.
Il messaggio deve spostare il focus?
No, l'annuncio avviene senza spostare il focus. Spostalo sul riepilogo solo dopo un invio fallito, se il form è lungo, e offri link ai singoli campi.
axe trova le live region mancanti?
Solo in parte. axe segnala ruoli e attributi non validi, ma non può sapere se l'annuncio è avvenuto. La prova resta un ascolto con NVDA o VoiceOver.