# aria-live for form errors

A form error is announced by a live region already in the DOM plus aria-invalid on the field. WCAG 4.1.3 Status Messages, level AA, requires it.

> Page: https://ui.eneawork.it/blog/aria-live-errori-form
> Markdown: https://ui.eneawork.it/blog/aria-live-errori-form.md

*2026-11-01*

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 catalogo EneUI conta 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie, letti da /api/stats il 1 novembre 2026. L'indice dei tag, che copre 1.275 componenti, assegna il tag validation a 5 record, form a 4 e error a 5, letto da /api/components/tags lo stesso giorno.

## 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.com

axe-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.

## FAQ

### 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.