multiple labels for a control using the label element

It is conforming in HTML to have multiple label elements pointing to the same control:

Example

code

<label for="f1">label text</label> <input type="text" id="f1"> <label for="f1">more label text</label>

Issues

Recommendations

Do not provide multiple labels for a control using the label element. Although it has been possible according as per the HTML/XHTML specifications for many years, this technique is simply not well supported and may never be.

If you have text before and after the input you want to include in the label, wrap the label:

label wrapped example

Example code

<label for="f2"> label text <input type="text" id="f2"> more label text</label>

Notes: tested and works in JAWS, NVDA and VoiceOver.

If you need more flexibility in control labelling with multiple sources use aria-labelledby:

aria-labelledby example

other content

Example code

<label id="l1" for="f3">label text </label> <input type="text" id="f3" aria-labelledby="l1 l2"> <p>other content</p> <label id="l2">more label text</label>

Notes:

Tested and works in JAWS, NVDA and VoiceOver.

In IE if you use aria-labelledby with multiple id references or aria-describedby with single or multiple id references, the referenced elements must be what Microsoft terms as accessible HTML elements. The example uses the label element as it makes sense. The example could have used a span (for example) but then tabindex=-1 would have to be added. refer to Making Non accessible Elements Accessible

Further reading

HTML5 Accessibility Chops: form control labeling