Introduzione
Quando si parla di accessibilità nei form HTML, spesso l’attenzione si concentra sul singolo campo di input. In realtà, uno degli aspetti più importanti e spesso sottovalutati riguarda i gruppi di controlli, in particolare radio button e checkbox.
Un gruppo di opzioni ben progettato deve avere una domanda o un’etichetta generale chiara, e ogni singolo controllo deve essere comprensibile anche da chi usa uno screen reader o naviga solo da tastiera. Se il gruppo non è strutturato bene, l’utente può sentire una serie di opzioni senza contesto, oppure non capire a quale domanda stia rispondendo.
In questo tutorial vedremo come usare in modo corretto label, fieldset e legend per rendere accessibili i gruppi di radio button e checkbox. È un tema molto pratico, utile in moduli di registrazione, sondaggi, preferenze utente e checkout e-commerce.
Codice completo
<form action="/iscrizione" method="post">
<fieldset>
<legend>Scegli il tuo piano di abbonamento</legend>
<div>
<input type="radio" id="piano-base" name="piano" value="base">
<label for="piano-base">Base</label>
</div>
<div>
<input type="radio" id="piano-pro" name="piano" value="pro">
<label for="piano-pro">Pro</label>
</div>
<div>
<input type="radio" id="piano-business" name="piano" value="business">
<label for="piano-business">Business</label>
</div>
</fieldset>
<fieldset>
<legend>Quali funzionalità vuoi attivare?</legend>
<div>
<input type="checkbox" id="notifiche" name="funzionalita" value="notifiche">
<label for="notifiche">Notifiche email</label>
</div>
<div>
<input type="checkbox" id="report" name="funzionalita" value="report">
<label for="report">Report settimanali</label>
</div>
<div>
<input type="checkbox" id="backup" name="funzionalita" value="backup">
<label for="backup">Backup automatici</label>
</div>
</fieldset>
<button type="submit">Invia</button>
</form>Spiegazione
Il punto chiave di questo esempio è la combinazione di fieldset e legend. Questi elementi servono a raggruppare controlli correlati e a fornire un contesto comune a tutto il gruppo.
1. Perché usare fieldset
fieldset crea una relazione semantica tra più controlli. Nel nostro esempio, tutti i radio button del piano appartengono allo stesso gruppo, così come le checkbox delle funzionalità. Questo aiuta non solo l’accessibilità, ma anche la manutenzione del codice: chi legge il form capisce subito quali campi sono collegati tra loro.
2. Il ruolo di legend
legend descrive il significato del gruppo. Per esempio, “Scegli il tuo piano di abbonamento” è la domanda a cui i radio button rispondono. Senza questa informazione, l’utente vedrebbe solo “Base”, “Pro” e “Business”, ma non saprebbe a cosa si riferiscono.
Dal punto di vista dell’accessibilità, la legend viene annunciata dagli screen reader come introduzione al gruppo. Questo è fondamentale perché ogni opzione sia interpretata nel contesto corretto.
3. Label per ogni input
Ogni input ha una sua label associata con l’attributo for. Questa associazione è importante per due motivi:
- cliccando sul testo della label si seleziona il controllo corrispondente;
- gli screen reader annunciano il nome del campo in modo chiaro.
Nel caso di radio button e checkbox, non basta avere solo il testo della legend: ogni opzione deve avere la propria label, perché rappresenta una scelta distinta.
4. Differenza tra radio button e checkbox
I radio button servono quando l’utente deve scegliere una sola opzione tra più alternative. Per questo motivo condividono lo stesso attributo name.
Le checkbox, invece, servono quando l’utente può selezionare più opzioni. Anche in questo caso il raggruppamento è utile, ma la logica di selezione è diversa.
Questa distinzione è importante anche per l’usabilità: un form accessibile non deve solo essere leggibile, ma anche coerente nel comportamento.
5. Cosa succede se manca il raggruppamento
Se togli fieldset e legend, il form continua a funzionare visivamente, ma perde contesto semantico. Un utente che usa tecnologie assistive potrebbe sentire qualcosa come:
- Base
- Pro
- Business
senza sapere che si tratta di piani di abbonamento. Questo rende il form più difficile da usare e aumenta il rischio di errore.
Best practice
- Usa sempre fieldset e legend per raggruppare radio button e checkbox correlati.
- Scrivi legend descrittive, formulate come una domanda o un’istruzione chiara.
- Associa ogni input alla sua label con for e id, anche se il testo è vicino visivamente al controllo.
- Evita etichette ambigue come “Sì” e “No” senza contesto: fuori dal gruppo perdono significato.
- Non usare solo il colore o il layout per distinguere le opzioni: la struttura semantica deve essere presente nel markup.
- Non annidare elementi non necessari dentro la label: mantieni il codice semplice e leggibile.
- Verifica la navigazione da tastiera: l’utente deve poter raggiungere i controlli e selezionarli senza problemi.
Errori comuni da evitare
Un errore frequente è usare una sola label per tutto il gruppo e dimenticare le label dei singoli controlli. Questo approccio non è sufficiente, perché la legend non sostituisce la label dell’input: la legend fornisce il contesto, la label identifica la singola opzione.
Un altro errore è creare gruppi visivamente separati con semplici div, senza struttura semantica. Anche se il risultato può sembrare ordinato a schermo, per gli assistive technology il significato resta debole o incompleto.
Quando usare questo pattern
Questo schema è ideale per:
- scelta del metodo di pagamento;
- preferenze di contatto;
- selezione di interessi in un profilo utente;
- questionari e sondaggi;
- filtri di ricerca con più opzioni.
Riepilogo
Per rendere accessibili i gruppi di radio button e checkbox non basta inserire i controlli nel form: serve una struttura semantica chiara. La combinazione di fieldset, legend e label permette di comunicare sia il contesto generale sia il significato del singolo controllo.
In pratica, ricordati questo schema:
- fieldset = raggruppa i controlli correlati;
- legend = spiega il significato del gruppo;
- label = identifica ogni opzione individuale.
Seguendo questa struttura, il form sarà più chiaro, più usabile e molto più accessibile per tutti gli utenti.
Approfondisci con risorse ufficiali
- MDN Web Docs — Documentazione su fieldset e legend per i form HTML.
- W3C HTML Specification — Riferimento ufficiale sugli elementi di form e sulla loro semantica.
- WAI-ARIA Authoring Practices — Linee guida utili per comprendere il comportamento accessibile dei controlli interattivi.
- WebAIM — Risorse pratiche sull’accessibilità dei form e sull’uso corretto delle etichette.