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 helps 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
  • 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
Examples of users with access needs
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
Motor impaired Clicking or tapping on form fields can be difficult Good spacing between fields and correctly associated labels

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.

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.

It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.

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.

Where do you live?

Get in touch

If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email access@digital.homeoffice.gov.uk.