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
By @edent
· accessibility HTML5 usability · 3 comments · 450 words · read ~630 times.
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!
Hey @MiroHQ!
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
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.