Making checkbox and radio labels clickable

33
votes

A large number of (dare I say most?) sites do not make the labels clickable for their checkbox and radio inputs. It seems to be a huge usability gain for very little effort. Are there any compatibility/functionality/usability issues with using <label> that would discourage developers from using this tag?

Even Stack Overflow seems guilty of this, e.g., when asking a question, the Notify daily of any new answers checkbox label is not clickable.

5
htmlaccessibility
If I remember correctly, <label> was introduced in HTML 4, well after HTML forms came about. So it's not used mainly because the tradition (learning from view-source) doesn't include it, and it's not necessary for proper visual appearance and ordinary functionality (clickable checkboxes). – Kevin Reid
I've known about it for a while but from now on I'll be using it a lot more. – AndrewB

5 Answers

32
votes

No reason other than laziness. <label>s are essential for accessibility, and are also pretty handy for those of us who have poor aim with our mouse clicks :)

8
votes

No, there are no issues with that, but unfortunately this is one of the most ignored html tags. Agreed, this tag is extremely important for accessibility reasons and what is more when it comes to layouts for small devices such as mobiles, you can't live without this.

3
votes

The only difficulty I can think of is that your form controls need to have an ID attribute, and ID attributes need to be unique within your page.

If you were generating form fields programmatically, you would have to generate a unique ID for each of them within each page they appeared on. This could conceivably be an issue.

But generally, yeah, I think it’s just that programmers don’t have it in their heads.

In ASP.NET WebForms (or whatever it’d called), you want the AssociatedControlID attribute on the <asp:Label> element.

3
votes

And here's a demonstration for those looking how to do it.

There is a way to connect the text near a form element with the element itself, so either one can be clicked to activate the control:

what would you like with your drink?

<label for="ice1"><input type="checkbox" name="withice" id="ice1">ice</label> 
<label for="ice2"><input type="checkbox" name="withlid" id="ice2">plastic lid</label>
<label for="ice3"><input type="checkbox" name="withstraw" id="ice3">straw</label>
1
votes

<label> is a pure HTML tag, no JavaScript is required. I suppose that all (major) browser support this tag, since it is very easy to implement.

A lot of developers are not using it because:

  • it requires more effort (adding all the tags everywhere)
  • they do not know about it existence
  • they do not think it is convenient?!

But there is no reason not to use the tag. Unless you are very limited with your bandwidth, maybe?