Best Practices for Accessible Form Design

Forms are usually the means to completing a process, for example, buying tickets, booking a flight and searching for quotes. They’re an essential step, and if designed poorly could result in lower conversion rates. Forms need to be quick to fill in and accessible for all people to complete. We’re going to talk through what we do in order to design the perfect form.

Structure & Spacing

To make forms a quick process for somebody, the inputs need to be scannable. Positioning your form label to the left of the input box creates two points to look at. So when reading a form like that creates a zig-zag in the person’s point of view, creating a back and forth motion. It is best practice to position your labels above the input box. This creates a straight line for the eyes to easily follow.

As part of the Gestalt Theory, the law of proximity should be applied to your form designs. To create space and flow, group your form inputs into categories. For example, Title, Name, and Age can be grouped under personal details, while Phone, Mobile and Email would be grouped as contact details. The Gestalt Theory comes in by making sure the spacing between these elements show what is grouped and what is not.

Screen Reading

As designers, we pride ourselves in designing for everybody, and that includes the one billion people who experience some form of disability. We have to make careful decisions to create a usable, accessible and aesthetically pleasing products or services. When it comes to errors on forms, we make sure not to just use colour to highlight an error. We use an icon to visually show that there is an error to draw attention. This is mainly brought into effect for those with colour blindness, however, it is an addition that is helpful for everyone.

However, what if someone needs to use a screen reader? In numerous designs, examples that show the importance of using an icon usually shows the error below the input box. This is not how the form should be ordered if you are designing with screen readers in mind. The error should be positioned before the input box as this is the correct reading order. The order of the content that’s read by a person’s screen reading software is determined by the order of the HTML elements. Although the visual order can be changed through CSS, there shouldn’t be any need to compromise when one design can work for all without the need for extra changes.

Colour Contrast

Now we’ve already touched base a bit on the use of colour within forms above. How using icons can help to differentiate between input states. This isn’t the only thing to look out for though. Colour contrast is something that should always be checked. Just because you’re able to read text on a certain colour, doesn’t mean everyone can distinguish it. Did you know that 4.5% of the population of the UK is colour blind?

Colour contrast is something that can be measured and graded. There are many tools for this, plugins for software or extensions for web. At Komodo, we’ve been using the Stark plugin for Sketch to help with colour testing and contrast tests. It’s an easy way and starting point to be able to test for yourself. However, user testing is the only way to know for sure, as there can be times where white on colour text is not as severe to read than what black on colour can be.

Automation

To help speed up the form filling process, automation should be enabled to help someone spend less time filling out information that they may fill out on several occasions. Automation not only helps speed up the process, but it also helps to minify the chances of error occurrences. For instance, instead of having someone type their full address out, allow them to search by postcode. If they have saved credentials to their browser, allow them to auto-fill details such as name and numbers. If you want people to keep buying from your site, allow them to save their details for next time.

Long Forms

It’s best practice to only ask for the information that is needed in order to use a product or complete an action. However, there are times when a long form may need to be created, for example, an onboarding process.

To make the form seem like less of a daunting task, break it up into smaller, bite-size chunks. Having a set of questions grouped on to separate pages creates the illusion that the form is quick to fill out. Using this method though, a progress indicator should be included to give the person an idea of how long or how many sections there will be to complete the form.

You’re also more likely to get more conversions if you ask for email sign-up at the end of the process. A person is less likely to drop-off at that point because they wouldn’t want to lose all the effort of inputting everything so far.

GDS Guidelines

At Komodo, we prefer to use the GOV Design System as a starting place for our references. The GDS is built for the broad public, and so in following it as a guide, you know you will be creating an accessible design with everyone in mind.

Filling out a form isn’t an exciting task that people look forward to doing. That’s why it’s our job as designers to make forms an easy task to get through. It’s our job to make the process as smooth as possible, eliminating the chances for errors to occur. If they do occur, then it’s our job to make the fix obvious and frictionless.