Online forms

Whether it is a simple sign up form, a multi-page stepper form or a postcode lookup, we aim to: 

• display common form controls consistently
• keep forms as simple as possible
• only ask for information which is needed
• follow form accessibility guidance

Form accessibility guidance

A summary of our form accessibility guidance:

• Form fields and labels - all form fields must have accurate labels or prompts so screen reader users know what each field is asking for. 
• Form control order - all form controls must appear in the same order in HTML as they appear on screen, for example label followed by input. Screen readers narrate forms in the order they appear in the HTML.
• Validation - group validation messages with input fields so screen readers can quickly read them.
• Fieldsets and legends – group sets of related controls for example personal details, and contact details into fieldsets and use the legend element as a label. For example a question with radio buttons for answers. The text and radio buttons are wrapped in a fieldset, with the question itself inside the legend tag.
• Form layout – forms should be one column with top aligned labels. This reads best on mobile and with screen readers.

Developer tools

Our developer toolkit gives details on different form components and how they should be used. Follow the do’s and don’ts, use the examples and refer to the form templates for how we should consistently display common form controls.