Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Take, for example, these two scenarios. Both very similar HTML, but different semantically:

Scenario 1:

<label for="myCheckbox">
    <input type="checkbox" id="myCheckbox" />
    My Checkbox
</label>

Scenario 2:

<input type="checkbox" id="myCheckbox" />
<label for="myCheckbox">My Checkbox</label>

Both of these would appear to produce the exact same thing. However, they don't. The difference is the implicit space in between the checkbox and the label. In the first scenario, this space would also activate the checkbox because it is part of thee label. However, the second scenario would not because it's outside the label. These creates a small amount of space where, if the user clicked, it would not activate the checkbox as expected.

My CheckboxMy CheckboxMy Checkbox

Depending on how set up the checkbox, there could be an even wider amount of space there. Such as if you floated the checkbox to the left and put a margin of 10, 15, or 20 pixels to the right.

Normally when I think of the UX, I try to make the entire related block all clickable for the same thing. To me, the left side of the checkbox all the way to the right side of its label should be part of one solid block which activate the control.

Should the space in between the checkbox and its label text also activate it? What are some (if any) circumstances in which you wouldn't want to do this?

share|improve this question
    
Yes, you could help the user further by making the white space clickable. – Like JcolBrand above I recommend a CSS solution to remedy this. –  Mike London Jul 12 '12 at 21:03
7  
The for attribute on the label is unnecessary when the checkbox it pertains to is inside the label. –  thomasrutter Jul 13 '12 at 4:52
1  
Interesting note: Stack Exchange actually uses scenario 2 for their "show removed posts" checkbox in the reputation history. –  animuson Jul 13 '12 at 7:52
    
Let me phrase it this way: if I am filling out a questionnaire online and the space is not clickable, I curse the developer under my breath and close the questionnaire immediately. –  Konrad Rudolph Jul 13 '12 at 8:51
2  
What's argument for not making it clickable? –  Mehrdad Jul 15 '12 at 8:32
show 4 more comments

6 Answers

I believe it should as the entire region in the eyes of the user is the "selection". Now, I think you can look at this issue from another angle which is...how do we remove the perception of a space?

One solution is to include a background surrounding the checkbox and label region. On hover over, the background could change color as well to further reinforce that this whole area is select-able. enter image description here

share|improve this answer
1  
This is the best solution so far, it is an elegant design, and I would add that the color difference should be much more of a contrast. –  Jarrod Roberson Jul 13 '12 at 1:01
3  
This is nice solution as it clearly denotes the boundaries of the clickable area. In fact, it starts to look like a simple button (with a checkbox within). –  Walt Ritscher Jul 13 '12 at 5:11
1  
While I wouldn't like it highlighted on every checkbox, I would expect entire rectangle around label, no matter what spaces or letter sizes there are to be clickable. –  Oleg V. Volkov Jul 13 '12 at 10:51
    
@OlegV.Volkov - thats the correct assumption. In fact, the UX could be improved even more by overriding the checkbox with a better visual style. Now were shifting the focus of the interaction from a checkbox to the actual label. –  Tom R Jul 13 '12 at 16:47
add comment

I agree with your sentiment that the entire area from left of the checkbox to the right of the label should be clickable as this allows for less click-misses and helps on touch devices.

The mouse icon should also visually indicate this over the whole clickable area.

share|improve this answer
add comment

According to http://www.w3.org/wiki/HTML/Elements/label your first scenario is improper, and should be listed as:

<!-- SCENARIO 1 -->
<label>
    <input type="checkbox" id="myCheckbox" />
    My Checkbox
</label>

Now, on to the other part, how should the implicit space be handled?

<!-- SCENARIO 2 -->
<input type="checkbox" id="myCheckbox" />
<label for="myCheckbox">My Checkbox</label>

vs

<!-- SCENARIO 1 -->
<label>
    <input type="checkbox" id="myCheckbox" />
    My Checkbox
</label>

I'm going to re-break these down, with some formatting remarks

<!-- SCENARIO 2 -->
<input type="checkbox" id="myCheckbox" /><!-- implicit HTML space exists here, is outside "label" -->
<label for="myCheckbox">My Checkbox</label>

vs

<!-- SCENARIO 1 -->
<label>
    <input type="checkbox" id="myCheckbox" /><!-- implicit HTML space exists here, is inside "label" -->
    My Checkbox
</label>

Should the space in between the checkbox and its label text also activate it?

Scenario 2 should have a non-clickable whitespace between the checkbox and the label, because the implicit HTML space is between the two elements.

Scenario 1 should have a clickable whitespace between the checkbox and the label because there is an implicit HTML space adjacent to the textnode and the input element.

What are some (if any) circumstances in which you wouldn't want to do this?

I honestly can't think of any such circumstance. I personally want an entire region around my checkbox to select the checkbox. See the answer from Tom R.


If you want to prevent this in the future, use this form:

<!-- SCENARIO 2 -->
<input type="checkbox" id="myCheckbox" /><label for="myCheckbox">My Checkbox</label>
<!-- non-implicit HTML space here, since the elements directly abut -->

However, you probably have some padding on your form elements to begin with, so they will have space around them. This then becomes a CSS issue.

share|improve this answer
    
alternatively, you can set the label and checkbox to display: block; float: left; to remove the unclickable space and add a small padding to add some clickable space. –  Lie Ryan Jul 13 '12 at 9:48
2  
His first scenario is valid, although it is redundant. –  zzzzBov Jul 13 '12 at 13:16
    
So that's supposed to change in HTML5? Interesting. –  jcolebrand Jul 13 '12 at 15:55
add comment

Clicking the label is sometimes used for gaining access to additional information about the selection, or instantiating the tooltip on click instead of on mouseover for some aesthetic purpose. Unless, necessary, the best approach is usually to maximize the clickable region, even if not well-defined visually (boxes in boxes are best avoided whenever possible).

share|improve this answer
add comment

In my opinion, yes. It is simply a continuation of the control with the same action as opposed to two separate actions.

The only case I can see where you wouldn't want this to happen is if clicking in either space resulted in different actions. (i.e. clicking a label selected any children, other items related to the same topic, etc.)

share|improve this answer
add comment

Yes the space between a checkbox and its label should be clickable. This is because if a user clicks the space in between its usually because they intentionally wanted to click the checkbox or text label, but accidentally moved their mouse to the gap. You should account for these user mistakes and make the gap clickable too.

Here's a good article that shows you the right way to make your checkboxes clickable: Why Your Form Checkboxes Need to Have Label Tags

share|improve this answer
1  
Could you pull some quotes from that article in case the link ever becomes broken? –  Code Maverick Apr 5 at 18:05
    
Main takeaway for me was the last two paragraphs: "Checkboxes without label tags are inaccessible to screen readers. Screen readers can’t figure out which label belongs to which checkbox based on positioning alone." "Label tags act as an anchor for form controls. It not only works for checkboxes, but you should use it for every form control that has a label." –  pearso Apr 5 at 21:13
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.