4 ms·

<label><input type="checkbox"/>Stuff</label> is easier.

by elchief 14y ago

deleted 14y ago
[deleted]
mintplant 14y ago
See nowarninglabel's comment below [1]; this doesn't carry the same benefits to accessibility as the ID-linking method. [1] https://news.ycombinator.com/item?id=4890833 https://news.ycombinator.com/item?id=4890833
- geetee 14y ago
  Why isn't the burden placed on assistive technology to operate properly? There is this habit in web development of being enablers for users with dated clients that's holding back progress. I know it sounds cold in this context, but it's the truth.
  - Firehed 14y ago
    There's also a habit in web development of not testing with assistive technologies. I'm certainly personally guilty. Of course, few people test their site's appearance through colorblindness simulators and other things that reproduce how a non-trivial percent of their viewers see the site (yet still bitch and moan about the 2% or so using IE6/7; some 8% of males have a form of colorblindness according to Wikipedia) Part of the problem is that when assistive technology breaks, it's user is completely SOL. Another is that replacing it is often expensive (both financially and operationally). This makes it a lot harder than simply upgrading to the latest version of $browser. edit: a comment below suggests that both of our comments are based on wrong info, and that screen readers and such actually prefer nested labels over id/for attributes. I don't have evidence either way, but I think both developers of websites and of AT are doing the handicapped a disservice as fellow humans.
- tomjen3 14y ago
  Then these users should upgrade their software.
thomas-st 14y ago
Not only is it easier and doesn't require the use of an ID, it also allows you to click in the space between the checkbox and the label text.
- Too 14y ago
  Came here to post this. This is very important and as a bonus, if you add some padding to the label the click area around the actual radio button becomes a bit larger. You can combine nesting with for="id" to make sure you get complete compatibility.
  - tomelders 14y ago
    I'm not sure about more recent versions of Safari, but I know this used to be the only way to get safari react to clicks on the label text.
- ebzlo 14y ago
  I always remembered this as being "invalid" HTML, but a quick Google search turns up nothing. Can anybody shed some light?
  - highwind 14y ago
    Are you thinking Improperly nesting elements? <i>Some <b>text</i> here</b> In that case, the label tag surrounding the input tag doesn't violate this rule.
  - ygra 14y ago
    It's not invalid; it's one of the two ways of using a label element. However, IE 6 didn't support it which is why I always resorted to the ID variant. The difference in typing isn't that large anyway.

<label><input type="checkbox"/>Stuff</label> is easier.

by elchief 14y ago

<label><input type="checkbox"/>Stuff</label> is easier.

deleted 14y ago

[deleted]

mintplant 14y ago

See nowarninglabel's comment below [1]; this doesn't carry the same benefits to accessibility as the ID-linking method. [1] https://news.ycombinator.com/item?id=4890833 https://news.ycombinator.com/item?id=4890833

geetee 14y ago
Why isn't the burden placed on assistive technology to operate properly? There is this habit in web development of being enablers for users with dated clients that's holding back progress. I know it sounds cold in this context, but it's the truth.
- Firehed 14y ago
  There's also a habit in web development of not testing with assistive technologies. I'm certainly personally guilty. Of course, few people test their site's appearance through colorblindness simulators and other things that reproduce how a non-trivial percent of their viewers see the site (yet still bitch and moan about the 2% or so using IE6/7; some 8% of males have a form of colorblindness according to Wikipedia) Part of the problem is that when assistive technology breaks, it's user is completely SOL. Another is that replacing it is often expensive (both financially and operationally). This makes it a lot harder than simply upgrading to the latest version of $browser. edit: a comment below suggests that both of our comments are based on wrong info, and that screen readers and such actually prefer nested labels over id/for attributes. I don't have evidence either way, but I think both developers of websites and of AT are doing the handicapped a disservice as fellow humans.
tomjen3 14y ago
Then these users should upgrade their software.

thomas-st 14y ago

Not only is it easier and doesn't require the use of an ID, it also allows you to click in the space between the checkbox and the label text.

Too 14y ago
Came here to post this. This is very important and as a bonus, if you add some padding to the label the click area around the actual radio button becomes a bit larger. You can combine nesting with for="id" to make sure you get complete compatibility.
- tomelders 14y ago
  I'm not sure about more recent versions of Safari, but I know this used to be the only way to get safari react to clicks on the label text.
ebzlo 14y ago
I always remembered this as being "invalid" HTML, but a quick Google search turns up nothing. Can anybody shed some light?
- highwind 14y ago
  Are you thinking Improperly nesting elements? <i>Some <b>text</i> here</b> In that case, the label tag surrounding the input tag doesn't violate this rule.
- ygra 14y ago
  It's not invalid; it's one of the two ways of using a label element. However, IE 6 didn't support it which is why I always resorted to the ID variant. The difference in typing isn't that large anyway.