Amar Sagoo

16 July 2007

Clickable control labels for the web

One of my pet peeves in web interfaces has always been that on radio buttons and checkboxes, only the small button itself is clickable. In native Mac and Windows interfaces, you can usually click on the text labels of these controls as well, giving you a much larger target, which, in accordance with Fitts' Law, makes them faster to hit.

Many, or perhaps most, people would probably never notice this difference in behaviour because they have only ever tried clicking on the button proper; the text doesn't visually suggest that it's clickable. But for those of us who are used to this shortcut, the standard web behaviour will catch us out every time. (Actually, I've started to wonder whether I'm the only person on the planet to click on the text labels, since I've never heard anyone else complain about this issue.)

Until a few months ago, I thought this was all just an unfortunate but inevitable limitation of HTML, and that developers found it too much hassle to implement a workaround in JavaScript. Then, I discovered HTML's label element. If you mark up a piece of text as a label and set its for attribute to be the ID of a form control, it becomes the "official" label for that control. The practical effect of this is that in most browsers, clicking the label will actually do something useful. For checkboxes and radio buttons, it will toggle their state, while for text fields, it will put the focus on the field. This works in Internet Explorer 6(!) and 7, Safari (I only checked version 3.0.2), Firefox and Camino. OmniWeb will do it in the upcoming 5.6 release.

So code like the following:

 for="mac">Mac user</label>

 for="windows">Windows user</label>

 for="loving_it">And loving it</label>

results in nice, fully clickable controls like this:

There's also an alternative, simpler syntax that doesn't require using the for and id attributes. Instead, you can just make the label element a parent of the control:

   value="mac">Mac user

However, this does not work in Internet Explorer 6, so if you want to be inclusive, stick with the more explicit syntax.


Anonymous said...

This does not work in Safari 2.0.4

Mo said...

Safari 2 doesn't let you click labels, unfortunately. Safari 3 (as you've discovered) fixes this, thankfully.

The simpler syntax (where the input is contained within the label) apparently breaks with some popular screen-readers, possibly because IE6 doesn't support it (I don't really know).

Amar said...

Thanks for lettings us know about Safari 2.

Regarding the syntax, I've decided that the best approach is probably to use both in combination, i.e., specify the 'for' attribute and also nest the control inside the label. That way, you keep compatibility, but can also specify a tooltip which will cover the whole control, including its label.

the kraus haus said...

I am relieved to hear that at least one other person tries to click on the label and not the button. I have always thought that it was intuitive to click on the label - what could be more logical then clicking on the description of the action? Thanks for the heads up.

Anonymous said...

That is also working for me in Opera 9.24 in Mac OS X, but I bet the other OS versions of Opera work the same. This little thing has also bothered me at some points, but because I'm not a web developer (just software), I've never done anything about it.

And yes, I am another "label-clicker" like you.

Chuck said...

Nope, you're not the only one who's annoyed by non-clickable labels on web pages. I use them all the time in software (Mac, Linux, and Windows), but most of the time they don't work in web pages.

I usually, but not always, use the label tag when writing HTML myself, but I didn't know that it made the label clickable. Now that I know, I'll be certain to use label all the time.