We’re nearing the end of our series of blog posts discussing various aspects of designing and building web forms. This penultimate post briefly deals with accessibility and validation because a good form is an accesible one and validation because, well, validation comes last!
So without further ado, lets get number four read and onto number five!
People with vision and motions disabilities tend to use their keyboard to navigate a website more than the mouse so your form must be able to handle this. For example, have you ever used the tab key while filling out a form and rather than going smoothly through it you jump from one field to one maybe three fields from where you want to be? This is caused by badly written code (missing or out of sync tabindex). Imagine if you couldn’t use the mouse and had to rely on the keyboard. Wouldn’t it be frustrating to be unable to get to the correct form field? How many times would you try before exiting the page/sale?
There are HTML tags that can aid the accessibility of a form by ensuring that it is written in as linear and legible a way as possible (see below).
While we have only touched on the issue of accessibility we wanted to highlight that it is a consideration during your form creation process. Ignoring accessibility could be eliminating huge customer base. A great accessible form resource including code examples can be found on this web usability website.
Form validation can appear irritating to users at times but it’s there for everyone’s good! Imagine signing up to a newsletter and putting in a mis-formed email address such as firstname.lastname@example.org. It would result in no newsletter appearing, an annoyed user and potentially a bad impression of the company.
Form validation really is a necessary evil (going so far as hindering spam form submits). I do think form validation should be kept to a minimum though. For example, let the user choose how they want to be contacted, don’t force them into leaving a phone number when you can initiate contact with an e-mail. Also, don’t insist on users leaving too much identifying personal information such as date of birth, name address etc all in the same form. It makes users very nervous when they have to leave enough personal information for you to apply for a mortgage in their name when all they want is a call back!
Clean validation is a must, highlighting the offending textarea lets the user quickly identify what they need to fix rather than scrolling through the form searching (see below)
Finally, make sure the validation works! I was trying to sign up to a site the other day and it just would not accept my postcode, no matter how I formed it, with and without spaces…nope, it just wasn’t accepting it, needless to say, I am not signed up to the website!