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.
[codepen_embed height=”400″ theme_id=”1820″ slug_hash=”maFIC” default_tab=”result”]See the Pen I Agree to the Terms of Agreement by Brian Dys Sahagun (@BrianSahagun) on CodePen.[/codepen_embed]
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">
[/code]
Enhancements
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.
Content Structure
Notice that 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.
Leave a Reply