5 ways to make web forms accessible

There are many websites and applications that I use frequently with a few being favorites of mine — Instagram, Youtube, and Amazon. When attempting to create an account on websites, we face the inevitable task of completing a sign up form. The ability to understand and effectively complete a web form is often overlooked — sometimes, even taken for granted. We see sign up and registration forms daily but rarely question the design process, and how people with disabilities access those forms. In other words, was the form designed for accessibility?

What is Accessibility

Accessibility in web design is the ability to design digital products for people with disabilities. Accessibility is not the same as usability, which is how users can use a product. Accessibility is more about how people have the ability to “access” something.

Why Should Web Forms Be Accessible

Sometimes web forms are difficult to complete even without visual or cognitive impairments so those with disabilities find web forms especially challenging to use. Accessible forms are easier to use for everyone, including those with disabilities.

• Cognitive disabilities — improving the layout structure, instructions, and feedback leads to better understanding and ability to complete web forms
• Using speech input — labels through voice commands are used to activate controls and move the focus to the fields that need to be completed
• Limited dexterity — forms with large clickable areas that include labels are easier to navigate
• Visual impairments — forms that are associated with labels are easier to identify and understand

5 Ways to Make Web Forms Accessible

1. Make sure your form is keyboard accessible — Make sure forms can be used by people who can only navigate your website by keyboard. Make sure the programming software you’re using will allow keyboard accessibility.
2. Add contrasting colors — Contrasting colors allow users with visual impairments to identify what fields need to be completed. Using tools that test your website’s contrast ratios are a great way to determine if the colors that you’ve used are appropriate, and make adjustments if there are any inconsistencies.
3. Use labels with form fields and inputs — Ensure that any grouping of form controls are related so fields are easily understood. Screen readers generally navigate using keyboards, and all form labels are read to them as they go through the form. This means that any fields that aren’t labeled will be skipped.
4. Flag up Errors — Make sure error messages are brought to the top of the page. Error messages should be short and easy to understand. To really kick it up a notch, link error back to the form field that it is associated with.
5. Use reminder text with labels — This is most helpful for those with cognitive disabilities. When a user has gone to search for information that’s required in an input field (e.g., customer number), they may forget that the field was for their customer number — this is why placeholder text isn’t efficient for all users. Reminder text should be placed beside the text field label.