Reputation: 39
standard example:
<label for="fname">First Name</label>
<input type="text" name="firstname" id="fname" value="">
Here we are using the "for" and "id" attributes to chain this label to the input
Alternative:
<label>First Name
<input type="text" name="fname" value="">
</label>
Here we are nesting our input inside of the label. The behavior as it turns out is the same as using the for/ID attributes but with much fewer keystrokes and to at least to me seems to be structured more intuitively. Given that this is the case and the fact that there are fewer potential fail points and reduces dependency I find it a bit odd that this style has not been more adopted.
Is there any reason why we would want to use the more common style over this alternative style? I cannot detect any behavioral differences or think of any use cases where the former is superior over the latter?
Upvotes: 1
Views: 2305
Reputation: 24815
It all boils down to support.
Nowadays support is pretty good in all major browser / screen reader combinations for implicit labelling (wrapping the input in a label).
However certain voice control software packages (such as Dragon Natural Speaking) do not have good implicit label support, but have support for explicit labels.
That is the main distinction.
If you are able to use explicit labelling then do so as maximum support is always a good goal, but if maintainability is an issue then use implicit labels.
For example if you had a form with 100 inputs then maintaining IDs is likely to be difficult and likely to result in worse accessibility errors (such as duplicate IDs or incorrect for
s). In that scenario I would advocate for implicit labels.
For a typical contact form then explicit labels should be easy to maintain and the preference.
The final reason to use explicit for="id"
type association is if you have a layout where the label needs to be positioned away from the <input>
. However if you ever find that this is the reason you are using an explicit label then odds are you have other accessibility issues. (As a label should be close to an associated input for people using screen magnifiers etc.)
Upvotes: 4