Agrupe campos con fieldset y legend
Agrupe correctamente controles relacionados, como los conjuntos de botones de opción.
Agrupe campos con fieldset y legend es una lección gratuita de Web Accessibility Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Web Accessibility Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Web Accessibility Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
Some Fields Belong Together
A set of radio buttons or related checkboxes is one question, not many. The fieldset element groups them as a unit. 🧩
The Group Needs a Name
Each control has its own label, but the whole group needs one too. The legend gives the set a shared question.
legend Goes First
The legend must be the first child of the fieldset. It acts as the caption that screen readers tie to every control inside.
<fieldset>
<legend>Shipping speed</legend>
</fieldset>A Complete Radio Group
Here a fieldset wraps the choices and the legend asks the question. Each radio still keeps its own label.
<fieldset>
<legend>Size</legend>
<label><input type="radio" name="s"> Small</label>
<label><input type="radio" name="s"> Large</label>
</fieldset>What Screen Readers Hear
Moving to a grouped radio, a screen reader announces the legend plus the option, like Size, Small. Context comes for free.
Radios Are the Classic Case
Radio buttons sharing a name are the textbook use. Without a fieldset, users hear options with no idea what they answer.
Checkbox Sets Too
A multi-select list like Choose your interests is also a group. A fieldset ties the checkboxes to one shared prompt.
Split Single Inputs
Address fields broken across multiple inputs benefit too. A legend like Billing address frames the whole section.
Do Not Overuse It
A lone text input does not need a fieldset. Reserve grouping for fields that truly answer one question together.
Styling Is Flexible
The default border looks dated, but you can restyle it freely with CSS. Semantics stay intact no matter how it looks.
ARIA Is the Last Resort
If a real fieldset is impossible, role group with aria-labelledby mimics it. Prefer the native element whenever you can.
Quick Check
What element names a fieldset for assistive tech?
Recap
Wrap related controls in a fieldset and caption them with a legend. Radio and checkbox sets gain context every user can rely on. ✅
Preguntas frecuentes
¿La lección «Agrupe campos con fieldset y legend» es gratis?
Sí — el texto completo de «Agrupe campos con fieldset y legend» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Web Accessibility Academy, actualiza a CoddyKit PRO. El curso de Web Accessibility Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Agrupe campos con fieldset y legend»?
Agrupe correctamente controles relacionados, como los conjuntos de botones de opción. Practicas Web Accessibility Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Web Accessibility Academy?
No se requiere experiencia previa. Web Accessibility Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Agrupe campos con fieldset y legend»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Web Accessibility Academy?
Sí. Cada lección de Web Accessibility Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Todo input necesita un label real
- Placeholder no es una etiqueta
- Agrupe campos con fieldset y legend
- Texto de ayuda y campos obligatorios anunciados