Label Your Checkboxes and Radio Buttons to Ease Your User's Woes

Posted by: François Beausoleil on 2009-04-30

Whenever I build forms, I'm very careful to always label all my fields. After all, it's good for accessibility, right? Well, it turns out it's also good for usability. Very, very good.

I'm getting older, and as I'm getting older, I get lazier. I like things to be bold and easily reachable. Small targets annoy me these days. Let's take for example Campfire's login page:

Let's say you login and want to be remembered. Nothing easier, right? Simply click the checkbox. But you're lazy, and there's this huge label right next to it. Go ahead, click the label. What? Nothing happens? You're right: nothing happens. Here's their code:

<dd>
  <input type="checkbox" name="remember" value="1" />
  Remember me
</dd>

Do you see the problem? I do. The label is not a label. It's not attached to the checkbox. For fun, let's count the number of pixels available to click on: 12×12, or 144 pixels.

Compare that to the following image:

In this particular image, we have an area that's 325×21, or 6825 pixels available for clicking on. But this picture is a lie. The full width of my browser's window is availble for clicking on.

To be clear, don't do this:

<form action="#" method="get">
  <div class="row">
    <!-- Don't do this! -->
    <p>Name</p>
    <input id="name" name="name"/>
  </div>
</form>

Instead, correctly set the field's id and label's for attributes:

<form action="#" method="get">
  <div class="row">
    <label for="name">Name</label>
    <input id="name" name="name"/>
  </div>
</form>

If you want to know how significant this is, please have a look at a toy page I made: example labelling versus clickable area.

Very important note: I did not select Campfire out of spite. I contacted Campfire's support department and was told that I should simply click the checkbox. To be fair, all other 37signals applications have correctly attached the label to the input. Other applications and websites have the very same problem:

• Jakob Nielsen's UseIt.com search page
• eBay.ca Sign in page
• Desjardins' AccèsD
• RubyForge's delete a project form, although in this instance it might be argued that this is a security feature… Pointed out by John Trupiano through Twitter.

This list was compiled in April 2009, after 20 minutes of searching.

More Information on the LABEL element and its use

• Accessible Forms, specifically Labelling Form Elements.
• Checkboxes vs. Radio Buttons, specifically look for #11 titled Let users select an option by clicking on either the button/box itself or its label.
• What Makes a Web Form Usable or Unusable
• HTML 4.01 Specification, particularly Section 17.9: Labels
• Fitts' Law on Wikipedia, which states that the bigger and closer an object is, the faster it is to use