Agrupando campos com fieldset e legend
Agrupe corretamente controles relacionados, como conjuntos de opções.
Agrupando campos com fieldset e legend é uma aula grátis de Web Accessibility Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Web Accessibility Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Web Accessibility Academy inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em 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. ✅
Perguntas Frequentes
A aula “Agrupando campos com fieldset e legend” é grátis?
Sim — o texto completo de “Agrupando campos com fieldset e legend” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Web Accessibility Academy, atualize para CoddyKit PRO. O curso de Web Accessibility Academy inclui 4 aulas no total.
O que vou aprender em “Agrupando campos com fieldset e legend”?
Agrupe corretamente controles relacionados, como conjuntos de opções. Você pratica Web Accessibility Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Web Accessibility Academy?
Nenhuma experiência prévia é necessária. Web Accessibility Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Agrupando campos com fieldset e legend”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Web Accessibility Academy?
Sim. Cada aula de Web Accessibility Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Toda entrada precisa de um label real
- Placeholder não é uma etiqueta
- Agrupando campos com fieldset e legend
- Texto de ajuda e campos obrigatórios anunciados