Label Your Fields!

I recently needed to download a trial version of MS Office 2007. Microsoft made me fill out a bunch of forms in order to do so. This wouldn't have been that bad except that they apparently have never heard of the "label" tag.

Not exactly new, the label element has been around since the introduction of HTML 4 (so from at least 1999). Despite its antiquity and usefulness, it still doesn't seem to get much use.

By way of review, the label element associates some text as the label for a form element. This is useful for assistive technology, but also for everyone else.

If you click on the text in a label associated with a text field, it will automatically give that form field focus. More useful, however, is its effect on checkboxes and radio buttons.

Compare a checkbox without a label: 

Check this box

to one with a label: 

Notice that they both look the same, but the second one allows you to use the text as part of the checkbox itself, making it far easier to use. This takes advantage of Fitt's Law: The time to acquire a target is a function of the distance to and size of the target (source - also see Wikipedia's entry on Fitt's law).

Using label elements is easy to do and makes form fields easier to use for everyone. If you aren't using them already (and I am always surprised by how little they are used), best start today.

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
I'm fortunate that I don't have any accessibility requirements, but as a human I do have usability requirements. I hate radio buttons and checkboxes that force me to actually click the control. Even if you don't care enough about accessibility to include labels for that purpose, at least include them on these controls for the usability enhancements.

This is one of my biggest pet peeves about too many sites. I wish I'd thought to write about it...
# Posted By Rob Wilkerson | 4/6/07 3:39 PM
Glad to hear I am not the only one. It always takes me just an extra second to get the cursor directly over the checkbox. Maybe I have a bad mouse or poor motor control, but it is still frustrating.
# Posted By Steve Bryant | 4/7/07 11:20 AM
BlogCFC was created by Raymond Camden. This blog is running version 5.8.001.