The following checkboxes have one big important difference:
First checkbox is associated with its label, second is not. Try clicking them. Which one is easier to use?
Form elements and labels should always be associated with each other using the [cci]for[/cci] attribute on [cci][/cci] tag. On the example above, when user clicks the label, the associated checkbox will be checked or unchecked depending on the current state.
Control association has two important purposes: usability and accessibility. From usability perspective, bigger targets are easier to click (or tap). Therefore label is easier to hit than small checkbox or radio button. From accessibility perspective, visually impaired users will not know what the form element does if there is no associated label. Just add the [cci]for[/cci] attributes and everything works as expected. Simple, huh?
Not always. We have this thing called ASP.NET WebForms.
In ASP.NET WebForms the server side label control [cci][/cci] is a different beast. It will render a [cci][/cci] by default. I’ve seen many forms that don’t have any semantic labels, just spans. The reason for this is, that [cci][/cci] needs an [cci]AssociatedControlID[/cci] attribute to create association with a form element. Like this: