6.6 KiB
| id | title | challengeType | videoUrl | forumTopicId | dashedName |
|---|---|---|---|---|---|
| 587d778b367417b2b2512aa7 | Envolver botões de opção em um elemento fieldset para melhor acessibilidade | 0 | https://scrimba.com/c/cVJVefw | 301030 | wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility |
--description--
O próximo tópico sobre formulários aborda a acessibilidade dos botões de opção (radio buttons). Cada opção recebe um label com um atributo for, que será vinculado ao id do item correspondente, conforme abordado no último desafio. Como os botões de opção geralmente fazem parte de um grupo em que o usuário deve escolher um, há uma maneira de mostrar semanticamente que as opções fazem parte de um conjunto.
A tag fieldset envolve todo o grupo de botões de opção para fazer isso. Frequentemente, usa-se uma tag legend para fornecer uma descrição para o agrupamento, que é lida por leitores de tela para cada opção no elemento fieldset.
O wrapper fieldset e a tag legend não são necessários quando as escolhas são autoexplicativas, como uma seleção de gênero. Usar um label com o atributo for para cada botão de opção é suficiente.
Exemplo:
<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--
O Camper Cat quer informações sobre o nível ninja dos usuários quando eles se inscrevem em sua lista de e-mail. Ele adicionou um conjunto de botões de opção e aprendeu em nossa última lição a usar tags label com atributos for para cada opção. É isso aí, Camper Cat! No entanto, o código ainda precisa de uma revisão. Altere a tag div ao redor dos botões de opção para uma tag fieldset e altere a tag p dentro dela para uma legend.
--hints--
O código deve ter uma tag fieldset ao redor do grupo de botões de opção.
assert($('fieldset').length == 1);
O elemento fieldset deve ter uma tag de fechamento.
assert(
code.match(/<\/fieldset>/g) &&
code.match(/<\/fieldset>/g).length === code.match(/<fieldset>/g).length
);
O código deve ter uma tag legend ao redor do texto perguntando em que nível ninja o usuário está.
assert($('legend').length == 1);
O código não deve ter nenhuma tag div.
assert($('div').length == 0);
O código não deve mais ter uma tag p ao redor do texto perguntando em que nível ninja o usuário está.
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 anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
</article>
<footer>© 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 anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
</article>
<footer>© 2018 Camper Cat</footer>
</body>