We can all agree labels make our inputs more semantic and accessible. Who doesn’t love clicking on a label’s text to immediately focus inside the input?
But there’s a detail regarding input and labels that we haven’t yet made up our collective mind about. A detail that has implications for user accessibility as well as developer readability:
To nest, or not to nest?
Here’s an example of the typical label and input setup I learned in the beginning:
As you can see, the label and input are sibling elements, linked by the “for” and “id” attributes. This works perfectly well…
I’ve always been a book person.
I was the kid getting scolded for reading under her desk in elementary school, the teen who spent her entire part-time paycheck at Chapters. I loved books, and I was good at them—good at reading them, good at analyzing them, good at writing my own. I used to lug my favourite three or four novels to school with me every day and arrange them on my desk just so I could look at them.
The people around me saw this passion and encouraged me early and often. I could be an English teacher, a…
