Accessible Forms – Grouping Elements Together With Fieldset
Published: | 1 Comment
Reading Time: 3 minutesThe
fieldset HTML element (and its accompanying legend element) can be used to group any set of input fields. Its use is optional but in certain situations it is really useful to improve accessibility in web forms. This post explains its use and accessibility benefits.
Consider the typical information a home insurance website might ask for during the application process. It might be laid out like this:
But of course most insurance companies allow a joint policy and similar information will need to be captured about the other person. So the form might look something like this:
Whilst sighted users can see that the input boxes belong to two different people, screen reader users may be confused by the duplication of the input labels or prompts since they are identical for each person’s details. Furthermore most screen reader users will typically tab from one input box to the next and may therefore miss out any headings or other text that precedes the input boxes.
legend tags are useful here to set the context for the input boxes.
Technical bit – for text inputs
fieldset is placed in the HTML to surround the elements that belong together and the
legend element is used to label the context of the fieldset. The markup for the above example would therefore be:
<form class="demo"> <fieldset> <legend>Details of First Person</legend> <ul> <li><label for="firstname1">First name:</label> <input id="firstname1" name="firstname1" type="text" /></li> <li><label for="lastname1">Last name:</label> <input id="lastname1" name="lastname1" type="text" /></li> <li><label for="dob1">Date of Birth: (dd/mm/yyyy)</label> <input id="dob1" name="dob1" type="text" /></li> </ul> </fieldset> <fieldset> <legend>Details of Second Person</legend> <ul> <li><label for="firstname2">First name:</label> <input id="firstname2" name="firstname2" type="text" /></li> <li><label for="lastname2">Last name:</label> <input id="lastname2" name="lastname2" type="text" /></li> <li><label for="dob2">Date of Birth: (dd/mm/yyyy)</label> <input id="dob2" name="dob2" type="text" /></li> </ul> </fieldset> </form>
Note that it’s the
legend that provides the identification for the grouping – not the
Technical bit – for radio buttons
fieldset and an accompanying
legend is a great way to provide context for groups of radio buttons – especially if there are a number with Yes/No answers.
legend elements the code for this question could look like this:
<fieldset> <legend>Do you want fries with that?</legend> <input type="radio" name="fries3" id="yes5" value="y"> <label for="yes5">Yes</label> <input type="radio" name="fries3" id="no5" value="n"> <label for="no5">No</label> </fieldset> <br> <fieldset> <legend>Do you want mayonnaise?</legend> <input type="radio" name="mayo3" id="yes6" value="y"> <label for="yes6">Yes</label> <input type="radio" name="mayo3" id="no6" value="n"> <label for="no6">No</label> </fieldset>
Without the fieldset and legend the questions would lose their meaning for screen reader users.
Fieldset and screen readers
Using the form HTML code from the previous examples in a test page screen readers such as NVDA and JAWS both voice the groupings to clarify the inputs.
Styling fieldset and legend with CSS
legend are established HTML tags it is easy to influence how they look in most common browsers using a cascading stylesheet (CSS). Typically browsers will present the
fieldset as a box with a border and some padding – the
legend being placed over the top border.
The border and padding can be removed to bring the style into line with the layout of the other form elements on a site.
Any other suggestions?
If you’ve got comments on any of the points covered in this post (or any of the others) I’d be glad to hear them. Likewise if you feel I’ve missed something please let me know. You can leave a comment using the comment form below.
Other posts tagged 'Forms'
- How to Build an Accessible WordPress Theme - Apr 28th, 2019
- Accessibility Checklist - Apr 7th, 2019
- Dragon Naturally Speaking Video 9 – Internet Forms - Mar 13th, 2014
- Video: How Do I Know My WordPress Website is Accessible? - Mar 5th, 2014
- Accessible Forms – Grouping Options With Optgroup - Aug 24th, 2011
- Accessible Forms – Selects or Dropdowns - May 24th, 2011
- Accessible Forms – Checkboxes and Radio Buttons - Apr 26th, 2011
- Accessible Forms – Should Every Input Have a Label? - Apr 15th, 2011
- Designing and Building Accessible Forms - Apr 12th, 2011
One Response to “Accessible Forms – Grouping Elements Together With Fieldset”
Like to leave a comment?
Please note: All comments are moderated before they will appear on this site.
Previous post: Accessibility London 2011 Presentations