aria-describedby per un contesto aggiuntivo
Associare suggerimenti e indicazioni che vengono letti dopo il nome
aria-describedby per un contesto aggiuntivo è una lezione Web Accessibility Academy gratuita su CoddyKit. Questa è la lezione 3 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.
Oltre il nome
A volte un controllo ha bisogno di più di un nome. aria-describedby aggiunge un contesto extra che uno screen reader legge dopo il nome.
Fa riferimento agli ID
Come labelledby, aria-describedby contiene l'id di un altro elemento. Il browser inserisce il testo di quell'elemento nella descrizione.
<input aria-describedby="hint">
<p id="hint">Use 8+ characters</p>Prima il nome, poi la descrizione
Uno screen reader pronuncia prima il nome, poi fa una breve pausa e quindi legge la descrizione. Questo ordine aiuta gli utenti a capire rapidamente il controllo.
Perfetto per i suggerimenti
I suggerimenti per i campi, come le regole sul formato, appartengono a aria-describedby, così le indicazioni vengono lette automaticamente quando il campo riceve il focus.
<input aria-describedby="fmt">
<p id="fmt">Format: DD/MM/YYYY</p>Non sostituisce il nome
Una descrizione è un'informazione supplementare. Se un elemento ha solo aria-describedby e non ha un nome, di fatto resta senza etichetta.
Combina più ID
Assegni a aria-describedby diversi ID separati da spazi e il browser unisce i relativi testi: è utile, ad esempio, per combinare un suggerimento e un errore.
<input aria-describedby="hint err">Anche gli errori sono descrizioni
Fai puntare aria-describedby a un messaggio di convalida, così l'errore viene letto insieme al campo, invece di rimanere isolato in un'altra parte della pagina.
<input aria-describedby="err">
<p id="err">Email is required</p>Mantieni brevi le descrizioni
Una descrizione dovrebbe essere una frase breve. Un testo lungo in aria-describedby viene letto per intero ogni volta, diventando presto fastidioso.
Resta visibile
A differenza di un'etichetta nascosta, il suggerimento a cui si fa riferimento di solito resta visibile sullo schermo, aiutando contemporaneamente gli utenti vedenti e gli altri.
Il supporto può variare
La maggior parte degli screen reader gestisce aria-describedby, ma alcuni lo annunciano solo in determinate modalità: perciò prova il suggerimento con uno screen reader reale.
describedby e labelledby
Usa aria-labelledby per indicare come si chiama un controllo e aria-describedby per aggiungere dettagli. Hanno funzioni diverse.
Verifica rapida
Vuoi che una regola per la password venga letta dopo il nome del campo. Quale attributo è adatto?
Riepilogo: aggiungere contesto
Hai imparato che aria-describedby fa riferimento agli ID per leggere suggerimenti ed errori dopo il nome, integrandolo senza mai sostituirlo. 💬
Domande Frequenti
La lezione «aria-describedby per un contesto aggiuntivo» è gratuita?
Sì — il testo completo di «aria-describedby per un contesto aggiuntivo» è 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 «aria-describedby per un contesto aggiuntivo»?
Associare suggerimenti e indicazioni che vengono letti dopo il nome 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 3 di 4.
Quanto tempo richiede la lezione «aria-describedby per un contesto aggiuntivo»?
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
- Il calcolo del nome accessibile, senza misteri
- aria-label vs aria-labelledby
- aria-describedby per un contesto aggiuntivo
- Errori comuni nei nomi che rendono silenziosi i controlli