Accessible forms
Use a <fieldset> to group together questions relating to the same topic, or group together multiple choice answers in one question.
Use a <legend> tag (read by screen readers) to describe the group of inputs, this is aimed at users who cannot visually connect the inputs with the question.
In the example below the legend has a class of 'screen reader only' leaving only the h2 question visible in standard browsers.
Where do you park your vehicle overnight? (h2)
We place the <legend> tag with a screen reader only class immediately after the opening <fieldset>:
<fieldset>
<legend class="sr-only">Where do you park your vehicle overnight?</legend>
<label for="driveway">In a driveway or garage</label>
<input type="radio" id="driveway">
<label for="carpark">In secure car park</label>
<input type="radio" id="carpark">
<label for="resident">On street resident permit parking</label>
<input type="radio" id="resident">
</fieldset>
By omitting the screen reader only class the <legend> may also be visible:
Your vehicle
Alert!Don't use <fieldset> or <legend> tags for single questions that ask for a one piece of information
This technique is credited to Léonie Watson of GOV.UKExternal link icon
