Collegare gli errori ai campi con aria-describedby
Fare in modo che il messaggio venga letto insieme al campo di input
Collegare gli errori ai campi con aria-describedby è una lezione Web Accessibility Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Web Accessibility Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Web Accessibility Academy include 4 lezioni in totale.
Un errore senza collegamento
Un messaggio di errore vicino a un campo sembra collegato a quel campo. Ma per uno screen reader è solo testo isolato che l'utente potrebbe non sentire mai. ⚠️
La soluzione è un collegamento
Dovete collegare formalmente il messaggio al relativo input. L'attributo che svolge questo compito è aria-describedby e si trova sul campo.
Indicate un id
Assegnate un id all'elemento di errore, poi impostate aria-describedby dell'input sullo stesso id. Ora i due elementi sono ufficialmente collegati.
<input id="email" aria-describedby="email-err">
<p id="email-err">Enter a valid email.</p>Che cosa sente l'utente
Quando il focus raggiunge l'input, lo screen reader legge l'etichetta, il tipo e poi la descrizione. L'errore non è più isolato.
Prima il nome, poi la descrizione
aria-describedby non sostituisce l'etichetta. L'etichetta fornisce il nome; describedby aggiunge informazioni che vengono lette dopo.
Descrizioni multiple
Potete elencare diversi id separati da spazi. Il browser li legge nell'ordine indicato, permettendovi di unire un suggerimento e un errore.
<input aria-describedby="hint err">Solo quando serve
Aggiungete l'id dell'errore a aria-describedby solo mentre l'errore è visualizzato. Puntare a un nodo vuoto o nascosto può far leggere niente o confondere gli utenti.
Mantenete il testo effettivo
L'elemento descritto deve contenere testo reale e visibile. aria-describedby legge il suo contenuto, quindi uno span vuoto non descrive nulla di utile.
Le destinazioni nascoste restano silenziose
Se la destinazione ha display none, la maggior parte degli screen reader la ignora. Lasciate il testo dell'errore renderizzato e visibile, così la descrizione viene effettivamente annunciata.
Funziona con aria-invalid
Abbinate describedby a aria-invalid sullo stesso campo. Uno indica che la convalida non è riuscita; l'altro spiega il motivo. Insieme raccontano l'intera storia.
Non solo per gli errori
Lo stesso attributo può contenere anche suggerimenti sul formato, ad esempio le regole per una password. Gli errori sono un uso comune, ma non l'unico.
<input aria-describedby="pw-rule">
<p id="pw-rule">At least 8 characters.</p>Verifica rapida
Come si fa a fare in modo che uno screen reader legga un errore insieme al relativo campo?
Riepilogo
Collegate gli errori ai campi con aria-describedby, facendolo puntare a un id reale e visibile. Lo screen reader leggerà quindi insieme il campo e il relativo errore. ✅
Domande Frequenti
La lezione «Collegare gli errori ai campi con aria-describedby» è gratuita?
Sì — il testo completo di «Collegare gli errori ai campi con aria-describedby» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Web Accessibility Academy, passa a CoddyKit PRO. Il corso Web Accessibility Academy include 4 lezioni in totale.
Cosa imparerò in «Collegare gli errori ai campi con aria-describedby»?
Fare in modo che il messaggio venga letto insieme al campo di input Eserciti Web Accessibility Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Web Accessibility Academy?
Non è richiesta alcuna esperienza precedente. Web Accessibility Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Collegare gli errori ai campi con aria-describedby»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Web Accessibility Academy?
Sì. Ogni lezione Web Accessibility Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Collegare gli errori ai campi con aria-describedby
- Indicare lo stato non valido con aria-invalid
- Spostare il focus sul primo errore
- Inline, al blur o all'invio: il momento è importante