Bruce Lawson’s personal site  : Don’t put pointer-events: none on form labels

Bruce Lawson’s personal site  : Don’t put pointer-events: none on form labels


Don’t put pointer-events: none on form labels


The other day I was tearing my hair out wondering why an HTML form I was debugging wouldn’t focus on the form field when I was tapping on the associated label. The HTML was fine:


<label for="squonk">What's your name, ugly?</label>
<input id="squonk">

I asked my good chum Pat “Pattypoo” Lauke for help, and without even looking at the form or the code, he asked “Does it turn off pointer events in the CSS?”

Lo and FFS, there it was! label {pointer-events:none;}! This daft bit of CSS breaks the browser default behaviour of an associated label, and makes the hit target smaller than it would otherwise be. Try clicking in the “What’s your name, ugly?” text:

Try me, I’m good


Try me, I’m crap


I’m jolly lucky to have the editor of the Pointer Events spec as my chum. But why would anyone ever do this? (That line of CSS, I mean, not edit a W3C spec; you do the editing for the sex and the glory.)

Once again, Pat whipped out his code ouija board:

And, yes—the presentation had originally been Material Design floating labels, and this line of CSS had been cargo-culted into the new design. So don’t disable pointer events on forms—and, while you’re at it, Stop using Material Design text fields!

Posted in
accessibility web standards, NOLIDGE BOMS, usability atrocities .
Follow comments via
RSS feed. Comment.


Leave a Reply





Source link