Website pattern library

Forms

Accessible forms

You can view Accessible forms in the Mendix code library

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)

Where do you park your vehicle overnight?

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

Where do you park your vehicle overnight?

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

Up arrow iconBack to top