It is conforming in HTML to have multiple label
elements pointing to the same control:
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:
Notes: tested and works in JAWS, NVDA and VoiceOver.
If you need more flexibility in control labelling with multiple sources use aria-labelledby:
other content
other content
Tested and works in JAWS, NVDA and VoiceOver.
In IE if you usearia-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
HTML5 Accessibility Chops: form control labeling