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:

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!

Published March 26, 2002 · Updated September 17, 2005
Categorized as Usability
Short URL: https://snook.ca/s/112

Conversation

3 Comments · RSS feed
Wayne said on August 02, 2005

The forms are quite useful, however, when you're dealing with checkboxes and labels, if you put the checkbox input in the label, then the label is automatically identified towards the input box. This makes things a lot easier in the same time keeping the site clean.

I use labels for forms mainly as a way of using CSS for forms. That way, the source code is generally uncluttered, and quite straightforward (functional as well, I may add.)

chocolate cowgirl said on April 16, 2007

You can also increase the size of the check for some browsers with

input.bigcheck {
height: 25px;
width: 25px;
}

input class="bigcheck" type=checkbox name="cpy_flg"

Works for IE but not Firefox

Paul B said on May 29, 2007

Good and Clear :-)

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.

Want to learn about scaling CSS for large projects?

I'm available for full and half-day workshops on scalable CSS architecture. I can provide on-site training for your team. Interested?
Get in touch.