Safari: Doesn’t support <label> elements for radio buttons and checkboxes

Posted by Pierre Igot in: Macintosh
September 28th, 2004 • 3:33 am

Today’s edition of MyAppleMenu has a link to a new article by Jakob Nielsen on checkboxes and radio buttons in user interfaces and, in particular, in forms on web pages.

As Heng-Cheong Leong (the MyAppleMenu webmaster) notes, the UI guidelines about checkboxes and radio buttons are as old as the Mac itself (i.e. 20 years old), and yet many, many sites still fail to comply with the most simple rule, namely that radio buttons are for mutually exclusive options while checkboxes are for lists of options where the user may select any number of them (from 0 to all) or for stand-alone (i.e. single) options.

It’s a very sad thing indeed, because it’s not just a cosmetic issue. It’s a problem that impacts the very usability of the interface.

What was new to me in Jakob Nielsen’s article, however, is Jakob Nielsen’s #11 recommendation:

Let users select an option by clicking on either the button/box itself or its label: a bigger target is faster to click according to Fitts’s Law. In HTML forms, you can easily achieve this by coding each label with <label> elements, as I’ve done for the example with horizontal radio buttons above (to select that option, click on the word “Four”).

For years, I have been lamenting the fact that clicking on a button’s label to select it wouldn’t work in web pages. (It works for radio buttons and checkboxes in all other environments in Mac OS X, except for a handful of applications that fail to comply with this.) But I thought that it was because it was not technically feasible. I was wrong! HTML 4.0 does in fact include the <label> tag, which gives you (among other things) the ability to click on a text label to select a radio button or checkbox.

How come I thought this wasn’t possible? Well, maybe it’s due in part to the fact that Safari doesn’t support the <label> tag! Jakob Nielsen said in his article that his exemple with radio buttons supported this, so I tried clicking on the text labels in his article in Safari, and it didn’t work.

Then I loaded Jakob Nielsen’s article in Camino and tried the same… and it worked!

It’s quite disappointing to discover that Apple’s own browser fails to comply with this — given that Apple is the main originator of most of the UI guidelines that many other software and web application developers still have so much difficulty adhering to.


Comments are closed.

Leave a Reply

Comments are closed.