166 lines
6.7 KiB
Markdown
166 lines
6.7 KiB
Markdown
---
|
|
id: 587d778b367417b2b2512aa7
|
|
title: Envuelve los botones de radio en un elemento fieldset para una mejor accesibilidad
|
|
challengeType: 0
|
|
videoUrl: 'https://scrimba.com/c/cVJVefw'
|
|
forumTopicId: 301030
|
|
dashedName: wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility
|
|
---
|
|
|
|
# --description--
|
|
|
|
El siguiente tema sobre formularios cubre la accesibilidad de los botones tipo radio. A cada opción se le da una `label` (etiqueta) con un atributo `for` vinculado al `id` del elemento correspondiente como se cubrió en el último desafío. Dado que los botones de radio a menudo vienen en un grupo donde el usuario debe elegir uno, hay una manera de mostrar semánticamente que las opciones son parte de un conjunto.
|
|
|
|
La etiqueta `fieldset` rodea toda la agrupación de botones de radio para lograr esto. A menudo utiliza una etiqueta de `legend` para proporcionar una descripción para la agrupación, que lectores de pantalla leen por cada opción en el elemento `fieldset`.
|
|
|
|
El contenedor `fieldset` y la etiqueta `legend` no son necesarias cuando las opciones se explican por sí mismas, como selección de género. Usar `label` con el atributo `for` para cada botón de radio es suficiente.
|
|
|
|
Aquí hay un ejemplo:
|
|
|
|
```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 quiere información sobre el nivel ninja de sus usuarios cuando se registran en su lista de correo electrónico. Agregó un conjunto de botones de radio y aprendió de nuestra última lección a usar etiquetas `label` con atributos `for` para cada opción. ¡Vamos Camper Cat! Sin embargo, su código todavía necesita ayuda. Cambia la etiqueta `div` que rodea los botones de radio a una etiqueta `fieldset` y cambia la etiqueta `p` dentro de ella a una `legend`.
|
|
|
|
# --hints--
|
|
|
|
Tu código debe tener una etiqueta `fieldset` alrededor del conjunto de botones de radio.
|
|
|
|
```js
|
|
assert($('fieldset').length == 1);
|
|
```
|
|
|
|
El elemento `fieldset` debe tener una etiqueta de cierre.
|
|
|
|
```js
|
|
assert(
|
|
code.match(/<\/fieldset>/g) &&
|
|
code.match(/<\/fieldset>/g).length === code.match(/<fieldset>/g).length
|
|
);
|
|
```
|
|
|
|
Tu código debe tener una etiqueta `legend` alrededor del texto preguntando que nivel ninja es un usuario.
|
|
|
|
```js
|
|
assert($('legend').length == 1);
|
|
```
|
|
|
|
Tu código no debe tener ninguna etiqueta `div`.
|
|
|
|
```js
|
|
assert($('div').length == 0);
|
|
```
|
|
|
|
Tu código ya no debería tener una etiqueta `p` alrededor del texto preguntando que nivel ninja es un usuario.
|
|
|
|
```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>© 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>© 2018 Camper Cat</footer>
|
|
</body>
|
|
```
|