How not to use the label element

by @edent | # # # | 3 comments | Read ~529 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.

<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.
Hard to click checkbox.

Let’s take a look at the code behind it:
HTML Source Code.
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!

3 thoughts on “How not to use the label element

  1. 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

  2. Josh says:

    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.

  3. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *