That's not how you use the label element. I should be able to click on the text to toggle the checkbox. pic.x.com/hpqfsycltw
How not to use the label element
HTML is magic. It comes with all sorts of great usability and accessibility features. But people often ignore them or misuse them.
Take a look at these checkboxen:
If you click on this label, nothing happens.
This is important. Tapping on tiny squares is hard for lots of people. Whether they have visual impairments, motor issues, or just a dirty touchscreen. You should give your user the biggest possible target area to interact with an element.
How is this possilbe? Here's the code for the second checkbox.
HTML
<input type="checkbox" id="c1"/>
<label for="c1"> If you click on this label, the checkbox will toggle</label>
The text is wrapped in the <label>
element, which is linked to the <input>
's 'id
attribute via the for
attribute.
The reason I bring this up, is because recently I had to sign up to the Miro website. I tried to click to agree to their terms and conditions, but I couldn't click the text.
Let's take a look at the code behind it: The
<input>
element has the CSS property set to display: none;
. It is invisible to the user.
The <label>
is an SVG image. The text is not part of the label and thus is not clickable.
I have no idea why they've done this.
You can use CSS to make ridiculously beautiful input elements. But Miro's replacement for a dull square is... a slightly different dull square!
Default: Miro:
Even if that square is a vital part of their brand guidelines, it would have been simple to put the text inside the <label>
.
Designers and developers - please take a moment to make sure your labels are fully clickable. Thanks!
Theories
Why do this?
Nope!
A great example of why I maintain most accessibility issues are simply cases of bad implementation — and for that matter the same goes for most cross-browser compatibility issues these days. #UX
I’ve just learnt that an input can have multiple labels, so they could really easily make the label a label, without having to touch the CSS or the existing label.
for the "why" ... this seems like a borked implementation to have "fancy" stylable checkboxes (using SVG). noting that this approach will also not work for keyboard users, screen reader users, etc.