---
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
<form>
  <fieldset>
    <legend>Choose one of these three items:</legend>
    <input id="one" type="radio" name="items" value="one">
    <label for="one">Choice One</label><br>
    <input id="two" type="radio" name="items" value="two">
    <label for="two">Choice Two</label><br>
    <input id="three" type="radio" name="items" value="three">
    <label for="three">Choice Three</label>
  </fieldset>
</form>
```

# --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(/<fieldset>/g).length
);
```

Il tuo codice dovrebbe avere un tag `legend` intorno al testo che chiede qual è il livello ninja dell'utente.

```js
assert($('legend').length == 1);
```

Il tuo codice non dovrebbe avere nessun tag `div`.

```js
assert($('div').length == 0);
```

Il tuo codice non dovrebbe più avere un tag `p` attorno al testo che chiede qual è il livello ninja dell'utente.

```js
assert($('p').length == 4);
```

# --seed--

## --seed-contents--

```html
<body>
  <header>
    <h1>Deep Thoughts with Master Camper Cat</h1>
  </header>
  <section>
    <form>
      <p>Sign up to receive Camper Cat's blog posts by email here!</p>
      <label for="email">Email:</label>
      <input type="text" id="email" name="email">


      <!-- Only change code below this line -->
      <div>
        <p>What level ninja are you?</p>
        <input id="newbie" type="radio" name="levels" value="newbie">
        <label for="newbie">Newbie Kitten</label><br>
        <input id="intermediate" type="radio" name="levels" value="intermediate">
        <label for="intermediate">Developing Student</label><br>
        <input id="master" type="radio" name="levels" value="master">
        <label for="master">Master</label>
      </div>
      <!-- Only change code above this line -->


      <input type="submit" name="submit" value="Submit">
    </form>
  </section>
  <article>
    <h2>The Garfield Files: Lasagna as Training Fuel?</h2>
    <p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
  </article>
  <img src="samuraiSwords.jpeg" alt="">
  <article>
    <h2>Defeating your Foe: the Red Dot is Ours!</h2>
    <p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
  </article>
  <img src="samuraiSwords.jpeg" alt="">
  <article>
    <h2>Is Chuck Norris a Cat Person?</h2>
    <p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence that anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
  </article>
  <footer>&copy; 2018 Camper Cat</footer>
</body>
```

# --solutions--

```html
<body>
  <header>
    <h1>Deep Thoughts with Master Camper Cat</h1>
  </header>
  <section>
    <form>
      <p>Sign up to receive Camper Cat's blog posts by email here!</p>
      <label for="email">Email:</label>
      <input type="text" id="email" name="email">

      <fieldset>
        <legend>What level ninja are you?</legend>
        <input id="newbie" type="radio" name="levels" value="newbie">
        <label for="newbie">Newbie Kitten</label><br>
        <input id="intermediate" type="radio" name="levels" value="intermediate">
        <label for="intermediate">Developing Student</label><br>
        <input id="master" type="radio" name="levels" value="master">
        <label for="master">Master</label>
      </fieldset>

      <input type="submit" name="submit" value="Submit">
    </form>
  </section>
  <article>
    <h2>The Garfield Files: Lasagna as Training Fuel?</h2>
    <p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
  </article>
  <img src="samuraiSwords.jpeg" alt="">
  <article>
    <h2>Defeating your Foe: the Red Dot is Ours!</h2>
    <p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
  </article>
  <img src="samuraiSwords.jpeg" alt="">
  <article>
    <h2>Is Chuck Norris a Cat Person?</h2>
    <p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence that anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
  </article>
  <footer>&copy; 2018 Camper Cat</footer>
</body>
```
