6.7 KiB

Raw Blame History

id	title	challengeType	videoUrl	forumTopicId	dashedName
587d778b367417b2b2512aa7	Inserire i pulsanti di opzione in un elemento fieldset per una migliore accessibilità	0	https://scrimba.com/c/cVJVefw	301030	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:

<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.

assert($('fieldset').length == 1);

L'elemento fieldset dovrebbe avere un tag di chiusura.

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.

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

Il tuo codice non dovrebbe avere nessun tag div.

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.

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

--seed--

--seed-contents--

<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--

<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>

6.7 KiB Raw Blame History