El siguiente tema sobre formularios trata la accesibilidad de los botones de radio. A cada opción se le asigna un <code>label</code> con un atributo <code>for</code> vinculado con el <code>id</code> del elemento correspondiente, tal como se describe en el último desafío. Dado que los botones de radio a menudo vienen en un grupo en que el usuario debe elegir uno, hay una manera de mostrar semánticamente que las opciones son parte de un conjunto.
La etiqueta <code>fieldset</code> rodea todo el grupo de botones de radio para lograrlo. A menudo utiliza una etiqueta de <code>legend</code> para proporcionar una descripción de la agrupación, que los lectores de pantalla leen para cada opción en el elemento <code>fieldset</code>. El <code>fieldset</code> y la etiqueta de <code>legend</code> no son necesarios cuando las opciones se explican por sí mismas, como una selección de género. Usando un <code>label</code> con el atributo <code>for</code> para cada botón de radio es suficiente.
Aquí hay un ejemplo:
<blockquote><form><br><fieldset><br><legend> Elija uno de estos tres elementos: </legend><br><input id = "one" type = "radio" name = "items" value = "one"><br><label for = "one"> Opción Uno </label><br><br><input id = "two" type = "radio" name = "items" value = "two"><br><label for = "two"> Opción Dos </label><br><br><input id = "three" type = "radio" name = "items" value = "three"><br><label for = "three"> Opción Tres </label><br></fieldset><br></form><br></blockquote>
Camper Cat quiere información sobre el nivel ninja de sus usuarios cuando se registran en su lista de correo electrónico. Él ha añadido un conjunto de botones de radio y aprendió a utilizar etiquetas con el atributo <code>for</code> de nuestra lección anterior para cada opción. ¡Sigue así, Camper Cat! Sin embargo, su código todavía necesita algo de ayuda. Cambia la etiqueta <code>div</code> que rodea a los botones de radio por una etiqueta <code>fieldset</code> y cambia la etiqueta <code>p</code> que está dentro a <code>legend</code>.
testString: 'assert(code.match(/<\/fieldset>/g) && code.match(/<\/fieldset>/g).length === code.match(/<fieldset>/g).length, "Make sure your <code>fieldset</code> element has a closing tag.");'
<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>
<imgsrc="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 lightening speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
</article>
<imgsrc="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>
