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

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.