Raggruppare i campi con fieldset e legend
Raggruppi correttamente i controlli correlati, come i set di radio button.
Raggruppare i campi con fieldset e legend è 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.
Alcuni campi appartengono allo stesso gruppo
Un insieme di pulsanti radio o di checkbox correlati rappresenta un'unica domanda, non molte. L'elemento fieldset li raggruppa come un'unità. 🧩
Il gruppo ha bisogno di un nome
Ogni controllo ha la propria etichetta, ma anche l'intero gruppo ne richiede una. legend fornisce all'insieme una domanda condivisa.
legend viene prima
legend deve essere il primo figlio di fieldset. Funziona come didascalia che gli screen reader associano a ogni controllo al suo interno.
<fieldset>
<legend>Shipping speed</legend>
</fieldset>Un gruppo di pulsanti radio completo
Qui un fieldset racchiude le opzioni e la legend pone la domanda. Ogni pulsante radio mantiene comunque la propria etichetta.
<fieldset>
<legend>Size</legend>
<label><input type="radio" name="s"> Small</label>
<label><input type="radio" name="s"> Large</label>
</fieldset>Cosa sentono gli screen reader
Quando si raggiunge un pulsante radio raggruppato, uno screen reader annuncia la legend insieme all'opzione, ad esempio «Dimensione, Piccola». Il contesto è incluso automaticamente.
I pulsanti radio sono il caso classico
I pulsanti radio con lo stesso nome sono l'uso tipico. Senza un fieldset, gli utenti sentono le opzioni senza sapere a quale domanda rispondano.
Anche gli insiemi di checkbox
Una lista a selezione multipla, come «Scelga i propri interessi», è anch'essa un gruppo. Un fieldset collega le checkbox a un'unica richiesta condivisa.
Dividere gli input singoli
Anche i campi dell'indirizzo suddivisi in più input ne traggono vantaggio. Una legend come «Indirizzo di fatturazione» definisce il contesto dell'intera sezione.
Non ne abusi
Un singolo input di testo non ha bisogno di un fieldset. Riservi il raggruppamento ai campi che insieme rispondono davvero a un'unica domanda.
Lo stile è flessibile
Il bordo predefinito può sembrare antiquato, ma può ridisegnarlo liberamente con CSS. La semantica rimane intatta indipendentemente dall'aspetto.
ARIA è l'ultima risorsa
Se è impossibile usare un fieldset reale, group con aria-labelledby ne imita il comportamento. Preferisca sempre l'elemento nativo quando possibile.
Controllo rapido
Quale elemento assegna un nome a un fieldset per le tecnologie assistive?
Riepilogo
Racchiuda i controlli correlati in un fieldset e aggiunga una didascalia con una legend. Gli insiemi di pulsanti radio e checkbox acquistano un contesto affidabile per tutti. ✅
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 30
- Lezioni
- 120
Domande Frequenti
La lezione «Raggruppare i campi con fieldset e legend» è gratuita?
Sì — il testo completo di «Raggruppare i campi con fieldset e legend» è 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 «Raggruppare i campi con fieldset e legend»?
Raggruppi correttamente i controlli correlati, come i set di radio button. 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 «Raggruppare i campi con fieldset e legend»?
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
- Ogni input richiede un vero label
- Il placeholder non è un label
- Raggruppare i campi con fieldset e legend
- Testo di aiuto e campi obbligatori annunciati