Forms are one of the main ways that we gather information from users
This can be anything from applying for an immigration product to entering details into a caseworking system.
Good labelling and correctly implemented input fields help people fill out a form correctly and easily. This reduces errors which can cost money to address.
- make sure each field has a label
- include autocomplete on fields requesting information about the user
- add hint text to help people know what to put such as ‘31 03 1984’ for a date of birth field
- use fieldsets to group related fields such as checkboxes or radio buttons
- use placeholders
|User||Access need||May find helpful|
|Blind or partially sighted||Screen reader users need to know where they are in a form||Correctly coded labels|
|Cognitive, language and learning disability, people with low digital literacy||Can find giving answers in specific formats difficult||Give information and example of expected formatting|
|Cognitive impairment or memory loss||May find remembering information difficult||Input fields are automatically filled in based on previous entry|
|Motor impaired||Clicking or tapping on form fields can be difficult||Good spacing between fields and correctly associated labels|
|Mobility impaired||May find repeated manual input difficult||Input fields are automatically filled in based on previous entry|
Creating good form labels
Attach the label to the form field
Labels need to be associated with their fields. They should always sit above the field and be spaced so that there is a visible connection. The label also needs to be attached to the form input in the HTML by using the
for attribute on the label.
<label class="govuk-label" for="event-name"> What is the name of the event?</label>
<input class="govuk-input" id="event-name" name="event-name" type="text">
This allows screen readers to read out the label when the field is focused and provide a larger click/tap area for users with motor impairments.
Find out more about labelling controls in WAI Web Accessibility Tutorials.
Autocomplete allows the purpose of each input field that collects information about the user to be understood by browsers and assistive technologies. This allows for the required information to be filled in automatically.
If a form field relates to the user’s personal information (from the set of input purposes listed at W3C Input Purposes for User Interface Components), include an explicit autocomplete attribute with the relevant value.
Avoid using placeholders
Do not use placeholders that disappear when the field is being used - this makes it harder for people with memory issues and are not always read out by a screen reader. Using them instead of a label can make it hard for users to double check their answers.
Use hint text to help users
Hint text is additional information that helps users know what information to put in a field. Make sure it is short and to the point with examples of expected formats. Use
aria-describedby to link the hint text to the field so that it is read out by screen readers. Do not add links to hint text as screen readers won’t pick this up. It is also important to make sure that the hint text passes colour contrast.
There is more advice about good hint text in the GOV.UK Design System.
Group related fields together
When using a group of check boxes, radio buttons or related fields like an address, you should use a
legend serves as the label for the group, usually the question being asked. This makes sure that screen reader users hear both the label for the field and for the group.
Get in touch
If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email email@example.com.