Basics of Accessible Form Fields

We’re all familiar with filling out forms online. But many of us haven’t stopped to think about how to make form fields accessible to all users. We’ll start with some basics.

When thinking about accessible form design, the main user groups we’ll consider are:

1. Blind or visually impaired users, who need form controls laid out logically, labelled accurately and made keyboard accessible

2. Sighted keyboard users, who also need all controls to be keyboard accessible

3. Users with cognitive disabilities, who need clear instructions and sensible error messages

How do you Make Form Fields Accessible?

Firstly, when planning your form, think about how much data you actually need to collect. Your form may have 5 form fields, but only email is required. Unless there is a compelling reason to ask for more information, stick to the minimum number of form fields you need.

Form Labels

Then, make sure your form controls have visible labels. Placeholder text alone, as seen here, is not sufficient. Why? For one thing, screen readers, which are used by blind people, may not read out placeholders. It’s also harder for anyone with a cognitive disability to remember what field they are typing in because placeholder text disappears when you start typing.

If you have any instructions for filling in a form, you can place these before the form. For example, “All fields are required.” You can also put instructions in form labels, or inline with the form element.

Grouping Controls

When making form fields accessible, make sure form controls that are part of a series are grouped together. This applies to radio buttons and checkboxes. You do this using the <fieldset> and <legend> elements.

You can also group form fields that are related, such as those for an address.

Logical Tabbing

The tab order through a form should be logical. On this page’s search form, the tab order differs from the visual order. After going from the Advanced Search option, the expectation is that Garden Name is the next field, but the next field is the Garden Location, which is not labelled correctly. The Garden Name field is only accessible after tabbing past the View button.

Form validation is a checking process which verifies that required fields have been populated and that data has been entered in the correct format. Forms are usually validated when they are submitted, but you can also validate form data before submission. In this example, two of the three requirements for a password have been met.

If there are any empty required fields or incorrect information, such as an invalid email address or non-matching passwords, users should be warned with appropriate feedback.

A review before submit option, as seen here, is useful for longer or more complicated forms. It allows users to go back and correct any incomplete or incorrect data.

Helpful Success Message

Just as important as notifying your users of form errors is letting them know that a form has been submitted successfully. You have the choice here of displaying a success message on the page or sending the user to another web page. This example from AbilityNet not only lets the user know the form submission was successful; it points the user to several helpful links.

Appropriate Form Length

Long forms can be extremely daunting for users. This medical registration form needs over 100 keypresses just to navigate between the controls, nevermind completing all the information. If your users are not computer literate or have cognitive problems, they are unlikely to complete such a form successfully. It is much better to split such a form into smaller parts, and allow users to skip sections that aren’t required or relevant. For example, if the person is not from abroad, they could bypass that part of the form.

Multi-step forms are common in ecommerce. To build an accessible multi-step form, it’s helpful to add a progress indicator so that users know what stage they have reached in completing the form. It should have previous and next buttons so that someone can return to an earlier step and review the information. If you have a time limit on completing the form, make sure the user can stop, adjust or extend it. And if your form is very long, you might want to enable a save and resume feature so that a user can return to completing the form at a later date.

The “one thing per page” approach is used by the UK Government in designing their forms. It simplifies the task into bite-sized chunks, works better on a mobile device and allows branching of answers. In this instance, there isn’t a progress indicator shown. This approach is popular with users: the Register to Vote form has a consistently high satisfaction rating with users, usually over 90%.

Accessible Color

Finally, consider color in your form designs when making form fields accessible. Make sure that your form elements have sufficient contrast between the foreground and background. This contact form’s Send Message button fails because the contrast ratio is only 1.51:1. It needs to be 4.5:1 or greater to meet the minimum contrast level specified in the Web Content Accessibility Guidelines.

You can also use color in your focus indicators, which indicate to keyboard users which interactive element on a page they are on. In this web form the field selected by the keyboard has a yellow and black border.

In the same form, the button has a yellow background with black text when it is focused, making it stand out.

It’s bad practice to disable form controls, particularly submit buttons. One reason is that the color contrast of disabled buttons often makes them unreadable. Another is that they can’t be clicked or focused on by the keyboard. This means that the user can’t press them and get any feedback.

To Sum Up

Now you know how to make form fields accessible! The next time you’re adding a form to your website, keep this list handy in order to improve the experience of all of your users. Need some help? Not sure if your form fields are currently accessible enough? We’ve got your back!