[jamamp]

I think the article has good sentiments about it. Actually using your application a lot helps polish it down a ton.

However, wouldn't putting the input inside of the label (before the label text) be a better solution than fiddling too much with CSS and flexbox? It's more foolproof to ensure clicks within the label activate the input, and eliminates the need for the "for" reference.

[tshaddox]

That’s what I generally do as well, but sometimes I don’t like how it leads to empty space that is part of the clickable area. This will happen if you have a label tag with the label text above the input (and the label text is much narrower than the input widget). This isn’t a huge problem, but it always bugs me.

[philo23]

> However, wouldn't putting the input inside of the label (before the label text) be a better solution

The one potential downside to doing it the way you describe is (assuming the same CSS flexbox layout) now all the white space on the right side of the label acts the same as clicking the radio/checkbox. Which is almost like the opposite problem to the original issue.

This might actually be a good thing for some designs/contexts, but not always. For example, on mobile it might lead to miss-clicks while trying to scroll past the <label>s

[bastawhiz]

That's only true if you let your labels be as wide as the parent container.

> on mobile it might lead to miss-clicks while trying to scroll past the <label>s

You can scroll on mobile by swiping over the text of a label itself without activating the input; this isn't generally a concern.

[lelandfe]

label>input instead of label+input. This is called an implicit label - time was, there were concerns about screen readers that couldn't interpret them.

I don't know how bad that is in practice: https://a11ysupport.io/tests/html_label_element_implicit

...but it does look worse than explicit: https://a11ysupport.io/tests/html_label_element_explicit

[swatche]

The spec says either way (https://www.w3.org/TR/html401/interact/forms.html#h-17.9), but I agree with putting the input inside the label for the acessibility and avoiding the blank space issue.

[chenmike]

There’s no reason you can’t do both, and indeed some a11y linters recommend doing that

[oxidant]

Put the input inside the label and still use "for" on the label. No way to test right now but that's what I usually do.