In 2012 I wrote up some notes on multiple labels for a control using the label element.

Back then (2012)

  • Only in Firefox is the accessible name calculated correctly for a control, with multiple labels.
  • Even when using Firefox not all screen readers use the accessible name provided by Firefox
  • Firefox concatenates the 2 labels text without a space so unless you put a space in the second label at the start of the text the last word of the first label and the first word of the send label run together. The accessible name exposed by Firefox for the example is "label textmore label text"

Now (2019)

  • Chrome and Edge Chrome on Windows supports multiple labels and produces the correct accessible name for controls.
  • Screen readers (NVDA, JAWS, Narrator) announce the accessible name correctly.
  • IE 11 (unsurprisingly) still does not support multiple labels, so only the second label is announced by Screen readers.
  • Browsers on iOS do not support multiple labels correctly, only the first label is announced by Voice Over.
  • Android with Chrome and Firefox support multiple labels and the correct label is announced by TalkBack (thanks WCAG-PAT)
  • Firefox supports, but (on Windows and Android) still concatenates the 2 labels text without a space so unless you put a space in the second label at the start of the text the last word of the first label and the first word of the send label run together. The accessible name exposed by Firefox for the example above is "label textmore label text"

Updated advice (same as the old advice)

Do not provide multiple labels for a control using the label element. Although it has been possible, as per the HTML specification, 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>

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">
other content
<label id="l2">more label text</label>

Try it yourself

Further reading

Test the effect of two label elements on a single form element (labellable elements) by Scott O'hara