Would the following be a valid usage of the label element in HTML5?
<label for="select">Some text</label>
<select id="select">
...
</select>
<label for="select">...more text</label>
The HTML5 specs don't seem to have anything to say about it.
edit: This question is now old. In the current wording it is clear that one element can have multiple labels (but not the other way around):
Labelable elements have a NodeList object associated with them that represents the list of label elements, in tree order, whose labeled control is the element in question.
You can have multiple labels that point to the same form control and it's legal.
According to HTML 4 Documentation:
The LABEL element may be used to attach information to controls. Each LABEL element is associated with exactly one form control.
The for attribute associates a label with another control explicitly: the value of the for attribute must be the same as the value of the id attribute of the associated control element. More than one LABEL may be associated with the same control by creating multiple references via the for attribute.
I just tested whether current screen reader / browser combinations will behave as expected, meaning: they associate all existing labels with the input and announce them all when focusing the input. This is useful especially when tabbing through form inputs with Windows desktop screen readers.
<label for="name">Your name:</label>
<input id="name" />
<label for="name">If forgotten, please consult your birth certificate.
Codepen: https://codepen.io/jmuheim/pen/OJvxzVG
Note: mobile screen readers not tested, as they do not offer tabbing, which renders the above irrelevant.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With