Designing Accessible Forms – What you need to know

Forms are ubiquitous on website and apps and needed for all sorts of things. We use them to sign up to a service, log into an account, or to place an online order. At the same time they are one of the most common places where accessibility problems occur. In this article, we go through all the ingredients of creating an accessible form that provides the best experience for all users.

No doubt we have all had a frustrating experience when filling out a form on a computer or phone, and this can especially be the case for screen reader users. But inaccessible forms aren’t just inconsiderate – they’re bad for business. They potentially lead to a company missing potential orders, surveys, registrations, and more. Design with accessibility in mind however, and everyone can get what they need from a website.

1. Support for keyboard navigation. Keyboard only users generally navigate through a form using the Tab key to jump to the next element. When a user is tabbing through your form, the tab order should be logical. For screen reader users, the input label reads out loud for each input field when the user navigates to it. Any non-label text content between form controls is usually skipped over.

2. All inputs should have associated labels. Labels are important for identifying your inputs. They help sighted users know what each input is for and help screen readers correctly announce what each input is.

3. Formatting expectations should be displayed. If you want the user to enter information in a particular format, this should be clearly indicated. For example, if you need their birthdate to be entered in MM/DD/YYYY format, this should be displayed somewhere near the input field.

4. Mandatory fields should be identified. If you have some required fields and some optional fields, make it clear which are which. Some designers prefer to mark the required fields with an asterisk or the text (required) near the label, and other designers prefer to mark the optional fields with the text (optional) near the label. It doesn’t matter which of these approaches you choose as long as you are consistent.

5. Colour should not be the only indicator for feedback. A red border is often used to indicate errors, whereas green is used for success messages. However, colour should not be the only way feedback is provided. If all you do is change the border on a text input when its value is valid or invalid, a user who is blind or has low vision may not be able to distinguish that difference. Instead a combination of colour, text, and icons should be used to display feedback such as error messages.

6. Error messages should be helpful and located close to the input. Expanding on the previous recommendation, when validating a form, error messages should be displayed as soon as possible, preferably on the client-side rather than waiting until the whole form is submitted.

For example, if you have an email field and the user enters something that is not an email, a helpful error message should be displayed right next to the input field when it loses keyboard focus. A message like “Please provide a valid email address” will suffice.