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:
Tested and works in JAWS, NVDA and VoiceOver.In IE if you use
aria-labelledbywith multiple id references or
aria-describedbywith single or multiple id references, the referenced elements must be what Microsoft terms as accessible HTML elements. The example uses the
labelelement as it makes sense. The example could have used a
span(for example) but then
tabindex=-1would have to be added. refer to Making Non accessible Elements Accessible
HTML5 Accessibility Chops: form control labeling