--- id: 587d778b367417b2b2512aa7 title: Inserire i pulsanti di opzione in un elemento fieldset per una migliore accessibilità challengeType: 0 videoUrl: 'https://scrimba.com/c/cVJVefw' forumTopicId: 301030 dashedName: wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility --- # --description-- Il prossimo argomento sui moduli riguarda l'accessibilità dei pulsanti di opzione. Ad ogni scelta viene data un'etichetta (`label`) con un attributo `for` che la lega all' `id` dell'elemento corrispondente, come spiegato nell'ultima sfida. Poiché i pulsanti di opzione vengono spesso usati in un gruppo in cui l'utente deve sceglierne uno, c'è un modo per mostrare semanticamente che le scelte fanno parte di uno stesso set. Il tag `fieldset` circonda l'intero raggruppamento dei pulsanti di opzione per ottenere questo risultato. Si usa spesso un tag `legend` per fornire una descrizione del raggruppamento, che gli screen reader leggono per ogni scelta nell'elemento `fieldset`. I tag di raggruppamento `fieldset` e `legend` non sono necessari quando le scelte sono auto-esplicative, come una selezione di genere. In questi casi è sufficiente utilizzare un'etichetta `label` con l'attributo `for` per ogni pulsante radio. Ecco un esempio: ```html
``` # --instructions-- Camper Cat vuole informazioni sul livello ninja dei suoi utenti quando si iscrivono alla sua mailing list. Ha aggiunto un set di pulsanti di opzione e ha imparato dalla nostra ultima lezione ad usare i tag `label` con degli attributi `for` per ogni scelta. Grande Camper Cat! Tuttavia, il suo codice ha ancora bisogno di qualche aiutino. Cambia il tag `div` che circonda i pulsanti di opzione in un tag `fieldset`, e cambia il tag `p` al suo interno in un tag `legend`. # --hints-- Il tuo codice dovrebbe avere un tag `fieldset` attorno all'insieme dei pulsanti di opzione. ```js assert($('fieldset').length == 1); ``` L'elemento `fieldset` dovrebbe avere un tag di chiusura. ```js assert( code.match(/<\/fieldset>/g) && code.match(/<\/fieldset>/g).length === code.match(/