Accessible online forms
Accessible forms are easier to use for everyone. They are easy to understand, complete, and submit. Like other digital content they should use plain English, have alternative text on images, and have good colour contrast.
Guidelines to follow when designing online forms
Reading order, keyboard accessibility and clear labelling
- Make sure a form is read out in the right order, and that order is logical and easy to follow. Avoid making forms with multiple columns, as that is more likely to create a form whose reading order may be confusing. Simple, linear forms are preferable for accessibility. You can check the reading order by using the Tab key to navigate a form.
- Make sure all forms are keyboard accessible. Users who cannot use a mouse may navigate web pages with the keyboard.
- Make sure all form fields and other controls have accessible labels. The label is read out by a screen reader to people who use that technology and should match the visible name of the field or control. Examples of form fields and controls include text boxes, checkboxes, radio buttons, and date fields. The label describes the function of the form field or control. For instance:
- a postcode field should clearly be labelled 'Postcode'
- the radio buttons for a question with Yes or No answers should be clearly labelled Yes and No
Colour and images
- Make sure form controls contrast sufficiently with their surroundings. This ensures they can easily be seen by everybody and reduces cognitive load.
- Don’t use colour alone to convey information and avoid using symbols, as they can be difficult to understand for some people.
- If users are asked to comment on the content of an image, make sure there is an accessible alternative that explains what the user is being asked to comment on. This could be a caption or other text description.
Types of form fields and controls
Dropdown boxes
Dropdown boxes can be used but should be kept short.
Answer matrices
Avoid using answer matrices as assistive technology can’t navigate them.
Drag-and-drop
If drag-and-drop movements are required to answer a question, make sure there is an accessible alternative so users who can't interact with drag-and-drop can also answer the question.
- Drag-and-drop cannot be used by assistive technology users and a wide range of disabled people. It requires hand-to-eye coordination, spatial awareness, and access to technology like a mouse, touch screen device, or a touch keypad.
- Alternatively, don't use drag-and-drop options and instead create a single, accessible, way to answer the question.
Sliding scales
If a sliding scale is required to answer a question, make sure there is an accessible alternative like a comment box or dropdown where the number on the scale can be entered, so users who can't interact with a sliding scale can also answer the question.
- Sliding scales don't work with some assistive technology and require hand-to-eye coordination, spatial awareness, and access to technology like a mouse, touch screen device, or a touch keypad.
- You should also limit the scale to between 1 and 5 to help people using assistive software or with cognitive difficulties.
- Alternatively, don't use a sliding scale and instead create a single, accessible, way to answer the question.
Submission
Make sure there is a Submit button on all forms.
