AccessibilityForms
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.
Helping everyone
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.
The basics
Do:
- 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
Do not:
- 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.
<div class="govuk-form-group">
<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">
</div>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.
Use autocomplete
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 fieldset and legend. The 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 UK Home Office Slack channel #ask-accessibility or email accessibility@homeoffice.gov.uk.