Using fieldset and legend elements to group HTML form controls

The fieldset and legend elements should be used together to create named groups of semantically related HTML input fields of forms. This allows the user to understand how input fields are related.

How a group is presented to a user depends mainly on whether he is sighted or not. Most graphical browsers by default draw a frame around the fieldset element and display a legend at the top of this frame, while the “readers” speak the text that is in the legend at the beginning of each fieldset block or in front of each control that is inside it. As a result, it is better to make it short and think through how the text in the legend and label will be combined, if they are pronounced together.
Here is an example of using a fieldset to group radio:

1. < fieldset >
2. < legend > Favorite color < / legend >
3. < input type = "radio" name = "fav-col" id = "fav-col-1" value = "red" >
4. < label for = "fav-col-1" > Red < / label >
5. < input type = "radio" name = "fav-col" id = "fav-col-2" value = "green" >
6. < label for = "fav-col-2" > Green < / label >
7. < input type = "radio" name = "fav-col" id = "fav-col-3" value = "blue" >
8. < label for = "fav-col-3" > Blue < / label >
9. < / fieldset >

In general: do not use fieldset and legend if you want to frame the content of the page (From the translator: a very unexpected conclusion. Who would have thought so?) The legend must be brief.
')

Additional materials:

• Fieldset, legend and "readers" ( Fieldsets, Legends and Screen Readers )
• Bust with availability - FIELDSET LEGENDS ( Too much accessibility - FIELDSET LEGENDS )
• WCAG 2.0, H71: Providing descriptions for form control groups using fieldset and legend elements ( WCAG 2.0, H71: fieldset and legend elements )

This post is a note. Background: Notes for web developers and web designers / web designers .

Related Notes

• Styling form controls with CSS. Revised edition. ( Styling form controls with CSS, revisited )
• Why styling form controls with CSS is problematic. ( Why CSS is problematic )
• Mark the controls correctly ( Label your form controls properly )
• Do not change the appearance and behavior of the form controls.

Afterword.

I am interested in the topic of website accessibility. Especially for users with limited vision or lack thereof. If someone knows the free screen readers that are actually used by such people, articles that describe the features of working with them, any information on this subject - please write to me. And as I receive information myself, I will write articles that cover this issue.

About the translator.

I am the Crow. And Crow is me. Something where is known as the Silent Imp.
I am a freelance coder, programmer .
I really like to make quality layouts.
And I have a little saytik .
I do translations because I read these articles myself and sometimes I want to do something good for the people around me. I hope that the article will give you pleasure or even be useful to you.

For syntax highlighting resource was used highlight.hohli.com/