Top tips for accessible form design

Forms are abundant, everywhere on the internet, appearing in different shapes and sizes. Forms are extremely flexible and can range from the simple (filling in a contact form), to the complex (an online checkout).

This article focuses on longer, more complex forms. Creating a frictionless process helps users to achieve their goals and can have a huge impact on your website user experience.

 

Tip 1: Let users know what they need, before they get started

An example showing the online passport application formThis is a simple step, that is often overlooked. If there are specific documents or pieces of information a user may need to complete the process, state this up front. It’s frustrating for users to get halfway through a form, only to realise they need their passport number. It distracts them from completing the task at hand. This experience is even worse if they come back to find the page has reset.

This passport application example is great example. It explains what you will need to use the service, the benefits of applying online and how long the process will take – all before you get started.

 

Tip 2: Show clear labels, and consider their placement carefully

There are many ways of showcasing a label for a form element. Some are more accessible than others. Generally speaking, there are three main options when it comes to label design:

An example showing three different methods of displaying form labels

1: Labels above inputs

This is the optimum layout and most commonly used across the web. It’s easy for users to understand, is consistent across all devices and is compatible with all browsers.

 

2: Labels to the left of inputs

For smaller forms with short labels, this can sometimes work as a space saver. It’s important to note, when designing for smaller devices, it’s best to give the input the full width of available screen space, moving the label above.

 

3: Floating labels

Floating labels are when you start off with placeholder text that animates to a label. They’re useful for keeping your designs minimalistic and allowing users to know the context of the field whilst they are typing. These are a popular choice for designers as they are seen as a trendy update to modern form design.

Yet, floating labels do come with accessibility issues. Eye tracking studies have suggested that users’ eyes are drawn to empty fields.

The best thing to do is test; different users react to designs differently. Whilst some will fly through a form, filling in fields rapidly, others may take their time, be anxious on submission and want to double-check what they’ve entered.

If your labels are not up to scratch, users might be unable to verify they've added the right information to the correct field.

 

Tip 3: Avoid using placeholder text

An example of how best to use field labels

This method is popular in modern web design for its minimalistic style, but it is inherently inaccessible for many reasons:

  1. Often placeholders are incorrectly implemented and provide little extra help to the user. If you need to give users more information about a field, add some text between the label and input.
  2. A common issue occurs when users see placeholder text and think the field has been pre-filled. In this case, users often skip straight past and onto the next field.
  3. Some earlier versions of Internet Explorer are unable to render placeholder text (without some hacking). This means a user only sees a blank text input, with no idea of what data they should enter.
  4. If a label disappears once a user starts typing, some users with cognitive impairments may struggle to remember where they're up to on a form.
  5. Often, placeholder text is lightened past the point of accessible colour contrast. This lack of contrast makes it difficult for users with visual impairments to read the placeholder.

(You can read more on this topic on the Nielsen Norman Group website).

 

Tip 4: Consider all states a form field can be

As designers, we must consider the default state of form fields. How do we highlight the field in focus? What do the success and error states look like?

How these states look are vital in communicating to users what’s happening at any given time.

An example showing form fields in differing states

Tip 5: Group form fields by input type

Some disabled users, or power users, will complete forms using the keyboard alone, as it’s often frustrating to switch from keyboard to mouse and back. If possible, it’s a good idea to group your form fields by input type to minimise friction for users.

An example of fields grouped by type

Tip 6: Choose field types carefully

It’s important not to hide crucial information behind hidden interactions, for example using a dropdown where a radio button could be used. The general rule is that if there are fewer than 7 items, a radio button interaction is more user friendly than a dropdown (You can read up some more about the rules when choosing these field types here.)

It’s worth considering that if there are 3 consecutive dropdown fields, a user has to complete 6 clicks, as opposed to 3 clicks if radio buttons were chosen. We always aim to get users to complete their goals in as fewer clicks as possible, as this reduces friction.

During usability testing, we discovered that by putting delivery options within a dropdown, some users completely missed the field. By pulling this out into a radio button and allowing users to clearly see all the options without any interaction, it makes the decision-making process smoother.

Example of a form using dropdown fields compared to radio buttons

Tip 7: Use in-line validation

If data needs to be entered in a specific format, it’s important to let users know if they have made any errors straight away. This is helpful for dates, email addresses, card numbers, passwords etc. It is frustrating for users to have to submit a form to find they have made an error.

When possible, it’s also a good idea to confirm when users have inputted data correctly as they move through the form. This confirms to the user they are completing actions successfully and will encourage them to complete the process.

A password verification example

Tip 8: Show an error summary panel

An example of a form error notificationIt is helpful for users to understand, all in one place, any errors they have made and how to fix them. Better still, if the errors are clickable, a user can jump straight to the problematic field and fix the issue.

This component is prominent within the Gov.UK Design System for good reason – it’s a rather valuable accessibility improvement.

 

Tip 9: Show a progress indicator, and make it interactive

An example of a form progress barIf there are many steps to a form, it’s a great idea to consider showing all the available steps in a sidebar to the left of the fields. This way, users get a sense of what information they need to disclose and how long the process will take. This also offers a method of navigation, allowing users to jump between pages if they need to change any information.

The example here shows how we designed a progress indicator for Social Work England's new website. Ensuring a user-friendly experience throughout.

 

Tip 10: Use different button styles to prioritise actions

When laying out more complex interactions within a page, we need to consider all the possible actions and prioritise them in position and style. Take, for example, this document upload feature we designed for Social Work England.

Example of a document upload form

The form above has 3 key actions (add a document, remove a document or Save and Continue), but the primary action of the form is to get users to move on to the next step. Each button has been carefully positioned and coloured to give a sense of prioritisation, through visual weight.

 

Tip 11: Make sure it works across devices

Form fields render differently when changing device, browser type and operating system. It’s important to remember to test as many different variations of these as possible. It’s also recommended to check the data as well as monitoring usability videos. It’s always best to test with real users so you can see what tech setups they are using to visit your website.

Example of a site working on desktop, tablet and mobile

Tip 12: Show a visual confirmation, with clear next steps

After the form has been successfully submitted, it’s worthwhile redirecting the user to a specific success page. This makes it easier to track conversions and provides users with clear visual feedback that they have completed the process.

After a successful submission, it’s important to tell users what to expect next. Whether this is when they should expect to receive a reply, or when their order will arrive; it’s good to manage user expectations.

You can also use this page to direct users to specific areas of the website and make sure their experience never hits a dead end.

An example of a success page

 

Blog author: Ash Pennington, UX Designer at CDS

Want to find out more about Inclusivity and Accessibility? Download our Inclusive Communications Report, 2019.

Go back to News page