While it is conforming to have multiple label elements pointing to a single control for labelling purposes, it is not recommended. It has been conforming as per (X)HTML specifications for many years, but it is not robustly supported. Other techniques such as wrapping the label around text and control and aria-labelledby do the job better and are much better supported in modern browsers and assistive technology.
multiple labels for a control using the label element
Notes, examples and recommendations
Comments
How do you feel about using a label and aria-describedby to attach a secondary bit of information. Maybe something like this.
Appointment
Date must be in this format mm/dd/yyyy
It seems to me this would be more appropriate for the secondary information.
My pseudo code didn’t work. Here’s the code snippet ala pastebin. https://pastebin.com/yJw7Dyxb
Hi Ted,
In theory, I agree that use of
aria-describedbyis the better choice, but in practice at the moment,aria-describedbyis less robustly supported across AT/browsers/OS’s thanaria-labelledby. Also the content in this case will will be recieved by a screen reader user in the same way if either is used i.e. thelabelandlabelledbyor thelabelanddescribedby, text will be announced when the control recieves focus.