Using the right HTML elements when implementing forms is essential to ensure they can be used by as many people as possible including screen reader users. In this blog Léonie explains the correct usage of the fieldset and legend elements.
On GOV.UK we often use groups of related form fields, like a set of radio buttons or checkboxes. These related fields might be used to offer multiple answers to a single question, or to ask for multiple pieces of information about the same thing.
Questions with multiple choices
For example, when the answer to the question is a simple "yes" or "no":
<form> <p>Do you have a passport?</p> <input type="radio" id="yes"> <label for="yes">Yes</label> <input type="radio" id="no"> <label for="no">No</label> ... </form>
In this example the question sits above the set of radio buttons, and visually it is clear that the question relates to the group of form fields. If you cannot see the page, this relationship is lost however. If you use a screen reader to choose one of the radio buttons, you will hear the form labels being announced ("Yes" or "No"), but you may not hear the question announced at all. This is because the question is not associated with the set of radio buttons within the code of the page.
Quick recap: screen readers get most of the information they need from the HTML code of the page. The browser takes the HTML code and converts it into accessible information that can be used by assistive technologies like screen readers. This article on Accessibility APIs: a key to web accessibility has more information.
If you use the arrow keys to guide your screen reader through the form you will hear the question announced. This is not an efficient way to navigate through a form though, so most screen reader users choose to use the tab key instead. But it is when you use the tab key to navigate through a form that the question is not announced - making it difficult to know what the correct answer might be!
We fix this by using the <fieldset> and <legend> elements. These elements work together to tell screen readers that a group of form fields relate to each other, and to provide a label for the group.
All of the related fields go inside the <fieldset> element, and the <legend> element is used to represent the question instead of the <p> element.
<form> <fieldset> <legend>Do you have a passport?</legend> <input type="radio" id="yes"> <label for="yes">Yes</label> <input type="radio" id="no"> <label for="no">No</label> </fieldset> ... </form>
Now when you use the tab key to navigate through the form, your screen reader will announce the question before it announces the first field in the group and its label. So in our example you hear something like "Do you have a passport? Yes, radio button".
Note: when used with Internet Explorer, the Jaws screen reader will announce the legend for every field in the fieldset (not just the first field). This is not the expected behaviour.
Questions with related answers
The <fieldset> and <legend> elements are also used when there are multiple questions about the same topic.
<form> <fieldset> <legend>Your address</legend> <label for="street">Street</label> <input type="text" id="street"> <label for="town">Town or city</label> <input type="text" id="town"> <label for="county">County</label> <input type="text" id="county"> <label for="postcode">Postcode</label> <input type="text" id="postcode"> </fieldset> ... </form>
It is possible to nest one <fieldset> element inside another, but it is not recommended. Screen readers do not automatically indicate the end of the <fieldset> element, so it is impossible for screen reader users to confidently know which fields belong within which fieldset.
When to use a fieldset and legend
You should use the <fieldset> and <legend> elements when:
- You have a single multiple choice question (using radio buttons or checkboxes).
- You have several questions relating to the same topic (like text boxes, or any other type of field).
When not to use a fieldset and legend
You should not use the <fieldset> and <legend> when:
- You have a single form field that asks for a single piece of information.
When used correctly, the <fieldset> and <legend> elements tie related form fields together in a way that is accessible to people who cannot see the visual layout of the form.