Skip to content →

User Friendly Online Forms

I’ve came across enough of online forms to say that many of them have usability and accessibility issues regardless of whether you have a disability or not. I would like to list some of them.

  • CAPTCHA: It’s the worst offender for many users, especially those who have visual disabilities. Not only words are distorted beyond recognition, but also audio is not clear either. For these reasons, blind users created a petition to kill CAPTCHA. Please support this cause by signing the petition and stopping using CAPTCHA in your online forms. CAPTCHA is not only inaccessible, but also annoying even to many users without visual disabilities, including myself. There are several solutions to this proposed by Karl Groves in his article,
    CAPTCHA-less Security.
  • Phone number as a required field: Many deaf and hard of hearing people, including myself, get frustrated when a form won’t be processed unless a phone number is entered as explained in Accessible Forms for Deaf People?. We live in the 21st century and have many other ways to communicate like via email, texting, instant messaging, etc. Even more and more people with normal hearing dislike talking on phone. The solution to this is in Online Forms – Please No Asterisks for Phone Numbers.
  • Use Labels: Sadly many online forms I have tested are not labeled properly. This not only causes frustrations to screen readers, but also to keyboard users. WebAIM explains basics of how to make form controls accessible.
  • Label alignment: According to Luke Wroblewski, forms with top aligned labels are easier and faster to fill out.
  • Error Messages: It would be best to display them on the form page instead of going to the next page that tells you made some errors and need to click the “Back” button. When displaying error messages, it’s suggested to show them in a way that it’s easier for users to identify and fix them.
  • Color Contrast: Don’t rely on color only to differentiate form labels or to display error messages. There are many people who have color deficiency (1 in 12 men and 1 in 200 women in the world). It would be better to say that asterisks are required fields, not in red, for example. Also, make sure that text of the form has enough contrast against background – i.e. light gray text on white background is harder to read than black or dark gray text. Or dark green text on black background. Not only people with color deficiency have difficulties with this, but anyone with normal color perception – especially mobile device users.
  • Show/Hide Passwords: Luke Wroblewski states: “Passwords on the Web have long been riddled with usability issues. From overly complex security requirements to difficult to use input fields, passwords frequently result in frustrated customers and lost business. The situation is even worse on mobile where small screens and imprecise fingers are the norm.” His solution is to display a user’s password by default with an option to show/hide it.
  • Simplify content: Last but not least, remove any unnecessary inputs and keep forms as simple and short as possible. Design forms in a way that improves experience for users without making them think more than they have to. More of best practices are discussed in the article, How to improve the usability (and conversion rate) of your forms.

With an increasing number of mobile device users and smaller screen sizes, it’s important to make sure that online forms are as easy to fill out in a regular web browser on a computer as inside a small screen of a smart phone.

Published in Accessibility User Experience