Web Accessibility - Part 5: Accessible web forms

The other day I filled in a form with a pen. Not something I do very often. I quite enjoyed it, till I made a mistake. Completing forms online is such a part of my life these days. Occasionally they can be infuriating and I could write a long list of what annoys me about them, but I'll just share my top three web form related pet hates.

  • Being told my email address is in the wrong format when I have only typed one letter. It's a small thing I know, but a really annoying small thing.
  • Watching an on-screen timer count down a given number of minutes and not knowing what is going to happen when it gets to zero. Will I be given the opportunity to extend the allotted time or will I be booted out of the form entirely?
  • Getting stuck in a loop. Going nowhere new. Never getting out of this form.

If you are going to have a form as part of your website or web application, how can you make it more user friendly and accessible?

Design

  • Keep the form design simple. Try to keep it to one column. The form will flow better and it will be less likely that sections of it are missed by the user. A one column layout is also easier to navigate with a screen magnifier.
  • You don't have to get fancy just because you can. For example, do you really need to use a 'slider' when you require the user to input a number?

The slider widget requires the user to move a button along a scale. Not everyone finds these easy to use. If you do want to have a slider in your web form, ensure it can be operated with a keyboard only. Alternatively, allow the user to input a number into a text field.

  • Don't have any instructions that are purely colour based. Include text alternatives.
  • Ensure adequate colour contrast throughout the form including on the form buttons.
  • Avoid greyed out/disabled buttons. We had one on our own website contact form that could only be interacted with once the form fields were completed correctly. Such buttons aren't easy to see if you have a sight impairment and users may try to interact with them and get frustrated. Far better to improve the error messages on the form, which is what we did. We also changed the appearance of the button. Instead of this:

we now have this:

and this

For those who cannot distinguish between the red and green, there are clear error messages.

We also changed the position of the button to improve the flow of the form. We aligned it left, directly under the last form field.

Error messages

Letting the user know when they have made an invalid entry or missed a form field is a really important part of creating usable, accessible web forms. The user needs to know where the error is and what to do to correct it. The error messages must also be clear to those who are completing the form with the assistance of a screen reader. Our own website Contact Form is a very short, simple form and this is how we dealt with error messages.

  • Rather than provide an error message after each input field, we display them once the user clicks the send button.
  • The error messages are placed above the related form field.
  • A list of all the errors is also provided at the top of the form, as is an indication of how many errors there are.
  • A link is included in each of the errors which, when clicked, will take the user to the relevant form field.

Instructions

If there is too much text included in a form, such as long winded instructions, it's just not going to be read by a lot of people. That said, some information will be really useful.

  • Indicate at the start of the form if the user will be required to upload or refer to any documents - e.g. a passport or driving licence?
  • Ensure that the user knows whether they will have the opportunity to review and edit their input before they have to submit the form.
  • Explain what will happen once the form is submitted - what are the next steps in the process. Will a confirmation email be sent, for example?
  • Make it clear when the form is ‘processing’. Don’t leave users wondering if they should press another button.

Time limits

There can be good reasons for time limits for completing a form. If you have entered your bank details into a form and then been distracted and moved away from your computer - you wouldn't want those details available for someone else to view. Also the form could relate to a live event. For example, it could relate to asking a question during a live webinar.

However you can give the user the opportunity to increase any time limit, even before they start completing the form. If they are given chance to do this at the end, make sure the user knows they will have this option.

Use plain English

It’s easy to slip into a language that you forget others do not speak. I work with developers and often have to point out that certain words will need translating into non-tech for customers as they are not words that are familiar to a lot of people. It’s the same in most areas of work. Test out your questions to see if users understand them and understand them in the same way.

Testing

This can't be emphasised enough. If you have created a form to be used on the web - test it. Test your form on lots of people. Does it flow logically? Can you get stuck in a loop? Can you operate it with a keyboard only? Does it make sense when read by a screen reader? What happens if you type numbers where there should be text or input a date that doesn't exist? Does the information get stored properly? Basically - try and break your form before someone else does.

Sources and resources

I am so grateful for all the folks out there who share their knowledge and experience of issues relating to accessibility/inclusive design. I have recently enjoyed reading:

Designing UX: Forms Create forms that don’t drive users crazy  - Jessica Enders

Angela Kilmurray

02 Oct, 2017