Hi, I’m Brian Dys — a photographer from the inside looking out · a composer entangled in electronic music · a UX designer · a spouse, a parent, & everything in between.
A while ago, I was connecting my HTC phone to Mac and it needed a piece of app to do so. Of course, there’s a requirement to agree to something I seldom read.
My behavior is to press on the label “I agree to the terms of the license agreement” instead of on the checkbox hoping that this will also tick the box.
But nothing happens because the label is a mere label unconnected from the form element (checkbox).
How do we make it easier for the user?
We must provide an action whether the user’s behavior is to press on the checkbox or on the label – the box should toggle.
Solution 1: Enclose in <label> tag
By enclosing the text label and checkbox inside the
label tag, all the elements inside it becomes active in toggling the related form element – so that whenever you press on it, the checkbox toggles.
Solution 2: Connect the <label> and <input>
We achieve this by putting an
id on the checkbox and using the attribute
for on the
label to reference the
id of the checkbox. For example:
[code lang=”html” title=”HTML”]
<label for="id-name">Text Label</label>
<input id="id-name" type="checkbox">
I personally prefer Solution 2 due to the semantic markup and the flexibility of having separate elements.
We must also provide an affordance on the text label by enabling the pointer cursor on hover. Further enhancement is the
background-color also on hover.
label comes first than
input – this is giving importance to the content structure. While our visual design dictates that the checkbox is on the left and the text label on the right, content structure dictates that you must announce the label first before showing the control it pertains to.