Making Usable and Accessible Forms

For anybody who has made a web site, you have likely needed to create a form. A form can be a pretty straightforward thing but did you know that you can make your forms easier to use but following a couple easy steps?

Here is our first example:

Username: <input type="checkbox" name="chk1" value="true">

As you can see, it's a pretty straightforward checkbox. You click on the box it gets checked. Click on it again and it's unchecked. But click on the word Username and nothing happens. For most people, clicking on a checkbox is not a big deal but there are some who may not have the hand-eye coordination or may have a disability that prevents them from easily selecting the checkbox.

Here is our second example:

<label for="chk1">Username:</label>
<input type="checkbox" id="chk1" name="chk1" value="true">

You'll notice that things are a little bit different. First of all, we've added an id attribute to our input. The id attribute allows us to reference this checkbox as a unique item on the page. The second thing you'll notice is that there is a new tag surrounding our text. Label allows us to "attach" an item to an object by its id as we have attached the text Username to the checkbox with the id chk1. With Internet Explorer and Netscape 6+, you will notice that when you click on the word Username the checkbox is now checked. This tag gets ignored on every other browser.

Here is our third example:

<label for="chk2" accesskey="u"><u>U</u>sername:</label>
<input type="checkbox" id="chk2" name="chk2" value="true">

You'll notice that we've enhanced our example a little more. We've added an accesskey attribute to the label tag. In IE and N6+ you will notice that if you press Alt-U that the checkbox will be checked. The underline tag is just used as a visual cue for our users so they know that an accesskey is available. You could certainly provide other ways for informing your users that the accesskey exists for this element. The accesskey attribute can be used directly on the input and would function just the same.

Caveat to using accesskeys: The concept behind using accesskey's makes sense but in reality, it's behaviour is unpredicatable. It can even override application accesskey's and ultimately make your site less usable. As a result, accesskey's should probably be avoided unless working within a more controlled environment (ie: an intranet).

As you can see, using the label tag and the accesskey attribute are a great and easy way to make your forms easier to use and more accessible. Now, go form crazy!