Making Your Forms Accessible and Easy to Use
Most of the time, online forms get little to no love whatsoever in web design. Ironic since the form is the place where a visitor actually gives you their information. Every other page in your site leads up to this moment — the moment of the form. Yes, I’m going to give you my personal information so you can re-market to me in newsletters or special promotions. Or even better, I’m ready to buy from you. But believe it or not, I still see lots of TABLE forms in almost perfect CSS-driven sites all around the web. The reasons may be that once everything else is designed in a web site, forms become an after thought — a “just throw it up there” task stemming from lack of strategy, time, budget or experience. Some web designers may just not know the correct way to program a form or have little experience making a form post data. Even those who put a little love into their forms sometimes neglect web accessibility guidelines so all visitors can fill out forms whether they are using assistive technologies, tools that ensure people with disabilities have equal access to information online, or not. Some simple yet important things marketers and programmers should check for in their forms are labels, legend, and the fieldsets that contain them.
A snippet of source code:
<form method="" action="">
<fieldset>
<legend>First Time Checkout:</legend>
<p>Fast and easy checkout</p>
<label for="form_email">Email address</label>
<input type="text" name="form_email" id="form_email" />
</fieldset>
<div><input type="submit" name="New Checkout" value="" /></div>
</form>
The Web Form that corresponds with the above code snippet:
Details about labels, legends and fieldsets
LABEL
The label identifies what information you are trying to capture i.e. in the above example “Enter email address” which appears on the form. The label will also appear on assistive technologies like speech browsers. The labels can be styled to fit your brand or appear just like text.
FIELDSET elements are exactly what they sound like. Fieldsets are a set of form fields contained in a section. In the above example, we can see a checkout form with six steps …
- Checkout Method
- Billing Information
- Shipping Information
- Shipping Method
- Payment Information
- Order Review
Each one of these steps is contained in a FIELDSET with a LEGEND that describes that field’s purpose.
LEGEND elements provide a description for the form FIELDSETS, i.e. in this example “First Time Checkout.” Just like the LABEL element, the LEGEND element will be read by speech browsers and can be styled into the design of your Web site. You can only have one LEGEND to FIELDSET in your forms, any more then that and the W3C will send out the web police!
Not a techie?
You don’t have to be a programmer to know if your forms are easy to use or a pain in the neck. Test them. Do they make sense? Where do you get hung up? You can also do informal tests with your customers or more sophisticated tests like an eye-tracking study to find out what if any form flaws exist. Another tool? Your Web analytics. If properly installed, programs like Google Analytics can identify form flaws like the exact step in your checkout where people are abandoning their cart. It could be shipping is too high or that your checkout is too long. Regardless of the reason, analytics and user testing can tip you off to these issues so you can investigate and remedy your forms.
Related posts:
Frederick's persnickety programming is stricter than your fourth grade English teacher, meaning it meets all accessibility guidelines and renders just as designed across all browsers in all platforms… and smelling like chalk on a blackboard. Frederick has over a decade of development experience as a web guru and holds a fine arts degree from the Ringling College of Art and Design. When Frederick isn't programming, he is dreaming of programming... seeking truth in code.
Published by Frederick Weiss Comments:0 CommentsPublished in E-commerce Marketing, Usability, Web Design