React
Errori di form accessibili
Un errore di form accessibile arriva su tre canali: testo visibile, attributi collegati al campo e annuncio per lo screen reader. Se ne manca uno, qualcuno resta fuori.
In sintesi
- L'errore va scritto in testo visibile accanto al campo, non solo con un bordo rosso.
- aria-describedby collega il messaggio al campo e aria-invalid segnala il valore non valido.
- L'annuncio deve essere breve: un messaggio per invio, non uno per campo.
Un errore di form accessibile arriva su tre canali: testo visibile accanto al campo, attributi collegati al campo e un annuncio per lo screen reader. Se manca un canale, qualcuno resta fuori.
Tre canali, non uno
Il testo visibile serve a chi guarda; aria-describedby lega quel testo al campo; aria-invalid dice allo screen reader che il valore non va bene. Un errore segnalato solo con il colore non arriva a chi non distingue rosso e verde.
Il markup che regge
Email
{error && (
{error}
)}Il campo senza errore non ha aria-describedby: l'attributo compare solo quando esiste un messaggio, così lo screen reader non annuncia un id vuoto.
Le tre regole
- Il messaggio è testo: un'icona con un titolo non sostituisce la frase che spiega come correggere.
- Il focus resta: dopo l'invio il focus va sul primo campo non valido, non in cima alla pagina.
- L'annuncio è breve: un solo messaggio per invio, altrimenti la live region legge tutto due volte.
Un controllo da riga di comando
npx @axe-core/cli http://localhost:5173 --exitaxe, distribuito con licenza MPL-2.0, trova gli attributi mancanti ma non giudica se il messaggio si capisce: la prova con lo screen reader resta manuale.
Record vivi nel catalogo
Tre form da cui partire: login-form, registration-stepper e la categoria blocchi form. Per sfogliare parti da 111.985 componenti.
La limitazione
Il collegamento funziona solo se l'id esiste nel DOM quando l'errore compare; un annuncio via role="alert" su un nodo già presente non viene letto da tutte le voci. Meglio inserire il nodo con il messaggio, come nello snippet, e verificare su almeno due voci diverse.
Dove continuare
La checklist completa è in componenti React accessibili; il metodo di verifica è in audit di accessibilità; il confronto misurato fra librerie è in librerie UI React.
Domande frequenti
Basta un bordo rosso per segnalare l'errore?
No, il colore da solo non arriva a chi non lo distingue né a uno screen reader. Serve un messaggio scritto e collegato al campo.
role alert o aria-live?
role alert è una live region educata con priorità alta, quindi va bene per un errore. Su nodi già presenti conviene inserire il nodo insieme al messaggio.
Dove va il focus dopo un invio fallito?
Sul primo campo non valido, così chi usa la tastiera riparte dal punto giusto senza ricercare l'errore.
Un test automatico copre l'accessibilità del form?
No, copre gli attributi mancanti. La prova con due screen reader e la tastiera resta necessaria.
Il messaggio deve stare sopra o sotto il campo?
Sotto il campo, subito dopo, è la posizione abituale. L'importante è che l'ordine di lettura resti campo, poi messaggio.