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
'id attribute via the
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:
<input> element has the CSS property set to
display: none;. It is invisible to the user.
<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!
Even if that square is a vital part of their brand guidelines, it would have been simple to put the text inside the
Designers and developers - please take a moment to make sure your labels are fully clickable. Thanks!
Noted! Passed along to the team. Thanks for surfacing.
— Miro (@MiroHQ) April 23, 2020
Why do this?
Oh... you know what? If occurs to me that clicking on the “Terms” link inside a label which also wraps a checkbox might result in the checkbox being checked through event bubbling, even though the user only clicked there to read the terms, not accept them.— Matt Bluefoot (@MattBluefoot) April 25, 2020