Notes on applying multiple labels for a control using the label element

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

Further Reading

HTML5 Accessibility Chops: form control labeling

About Steve Faulkner

Steven is the Senior Web Accessibility Consultant and Technical Director, TPG Europe. He joined The Paciello Group in 2006 and was previously a Senior Web Accessibility Consultant at vision australia. He is the creator and lead developer of the Web Accessibility Toolbar accessibility testing tool. Steve is a member of several groups, including the W3C HTML Working Group and the W3C Protocols and Formats Working Group. He is an editor of several specifications at the W3C including HTML 5.1, Using WAI-ARIA in HTML and HTML5: Techniques for providing useful text alternatives. He also develops and maintains www.HTML5accessibility.com
This entry was posted in accessibility testing, Firefox, HTML, HTML5, NVDA, VoiceOver, WAI-ARIA, Web Accessibility. Bookmark the permalink.

4 Responses to Notes on applying multiple labels for a control using the label element

  1. Pingback: Accessible Client-side Form Validation with HTML5, WAI-ARIA, & the jQuery Validation Plugin | Deque Systems | Software, Training, and Consulting for Web Accessibility and Section 508 Compliance

  2. Ted Drake says:

    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.

    • Ted Drake says:

      My pseudo code didn’t work. Here’s the code snippet ala pastebin. http://pastebin.com/yJw7Dyxb

      • Steve Faulkner says:

        Hi Ted,
        In theory, I agree that use of aria-describedby is the better choice, but in practice at the moment, aria-describedby is less robustly supported across AT/browsers/OS’s than aria-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. the label and labelledby or the label and describedby, text will be announced when the control recieves focus.