What is aria-labelledby? - Visually Labeling Elements with WAI-ARIA

The aria-labelledby attribute is one of the most powerful tools in your WAI-ARIA toolkit. It allows you to create the label (the "Accessible Name") of an element from the content of one or more other elements on the webpage. This is particularly useful when a visible label is present but is not directly connected to the interactive element via a native HTML element like <label>. It creates a programmatic connection crucial for assistive technologies like screen readers to convey the context and function of UI components.

What is aria-labelledby?

The official WAI-ARIA specification defines aria-labelledby as follows:

"Identifies the element (or elements) that labels the current element. See related aria-describedby." [1]

This essentially means: The attribute contains one or more IDs of other elements on the page. The text content of these elements is then used by assistive technologies as the label for the element on which aria-labelledby is set.

Detailed Explanation

Imagine you have a complex user interface. Sometimes, the text describing an element isn't directly next to it or cannot easily be enclosed in a <label> tag. This is where aria-labelledby comes in.

You provide the aria-labelledby attribute with a space-separated list of id attributes. The browser then collects the text content from each of these elements in the specified order and concatenates them into a single string. This string becomes the Accessible Name of the element—the name a screen reader announces when the user encounters the element.

A crucial point is the precedence in calculating the Accessible Name. When you use aria-labelledby, it overrides other name calculation methods, such as the element's own content or an aria-label attribute. It has a very high priority.

The following diagram illustrates the process of how the Accessible Name is formed using aria-labelledby:

Process of Accessible Name Calculation through aria-labelledby

Text description for the diagram "Process of Accessible Name Calculation through aria-labelledby"

This flowchart illustrates how aria-labelledby works.

1. An element has the attribute aria-labelledby="id1 id2".
2. The browser and the Accessibility API analyze this attribute.
3. They search the DOM for the elements with IDs "id1" and "id2".
4. The text contents of these two elements are extracted.
5. The contents are combined in the order "id1" then "id2" into a single string.
6. This combined text becomes the Accessible Name of the original element. 7. A screen reader will announce this combined name when the user focuses the element.

What is it used for?

aria-labelledby is not an all-purpose solution but a specialized tool for specific situations. Here are the most common use cases:

1. Labeling Dialogs and Modals: An <h2> heading within a dialog window can serve as the perfect label for the entire dialog container (role="dialog").
2. Linking Form Fields with Non-Standard Labels: If a label cannot be directly linked to a <label> tag for design reasons (e.g., in complex tables or grids), aria-labelledby can bridge the gap.
3. Combining Multiple Text Sources: Sometimes, a complete label is composed of several visible text elements. With aria-labelledby, you can concatenate them into a meaningful whole.
4. Labeling Interactive Elements Without Visible Text: A button that only contains an icon can be labeled by a nearby, visible text section.
5. Structuring Complex Widgets: For components like radiogroup, menu, or tree, a parent element (e.g., a div with a heading) can label the entire group.

Practical Examples

Here you can see the difference between a good and a bad application of aria-labelledby.

Good Example

Dialog Window with aria-labelledby

<!--
  Good Example:
  The dialog container (role="dialog") is labeled by the heading (id="dialog-title").
  A screen reader would announce "Edit Settings, Dialog" upon opening the dialog.
-->
<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
  <h2 id="dialog-title">Edit Settings</h2>
  <!-- ... Dialog content ... -->
  <button>Save</button>
  <button>Cancel</button>
</div>

Bad Example

Simple Form Field - Incorrect Use

<!--
  Bad Example:
  Here, aria-labelledby is unnecessarily used instead of a native <label> element.
  A <label for="username"> offers more benefits, e.g., focusing the input when clicking the label.
-->
<p id="user-label">Username:</p>
<input type="text" id="username" aria-labelledby="user-label" />

<!--
  The correct and more robust way:
-->
<label for="username_correct">Username:</label>
<input type="text" id="username_correct" />

Best Practices & Recommendations

To use aria-labelledby correctly and effectively, you should observe a few rules.

Always Prefer Native HTML Solutions

The first rule of ARIA usage is:

Use native HTML elements and attributes whenever possible [2].

For form fields, <label for="id"> is almost always the better choice [3]. It is more robust, provides a larger click area, and doesn't require JavaScript to function. Only use aria-labelledby when a native solution is not feasible.

Ensure Referenced IDs Are Valid

The aria-labelledby attribute is useless if the ids it refers to do not exist in the DOM or are not unique. The browser cannot resolve the reference, and the element receives no Accessible Name. Automated tests and manual checks with a screen reader are essential here.

Combine Multiple IDs Carefully

When you reference multiple IDs, their text contents are concatenated in the specified order with a space in between. Test the result with a screen reader to ensure the resulting label sounds understandable and natural.

Combining Multiple Labeling Elements

<h3 id="form-heading">Contact Form</h3>
<!-- ... other fields ... -->
<label id="date-label">Date of Birth</label>
<span id="date-format" class="small-text">(DD.MM.YYYY)</span>
<input type="text" aria-labelledby="form-heading date-label date-format" />
<!-- Screen reader says: "Contact Form Date of Birth (DD.MM.YYYY), input field" -->

Do Not Use aria-labelledby and aria-label Simultaneously

According to the specification [4] for Accessible Name computation, aria-labelledby takes precedence over aria-label. If you place both attributes on the same element, the value of aria-label will be ignored. This can lead to confusion during code maintenance. Decide on one method or the other.

Common Misunderstandings

aria-labelledby is the Same as aria-describedby

This is a common misconception. The two attributes have different purposes:

• aria-labelledby provides the name of an element (essential, the identity). It answers the question: "What is this?"
• aria-describedby provides a description (supplementary, additional information). It answers the question: "What else do I need to know about it?"

A screen reader usually announces the name immediately, whereas the description is often read out after a short pause or upon user request.

aria-labelledby is a Universal Replacement for the <label> Element

No, absolutely not. As mentioned, <label> is the semantically correct and more robust method for standard form elements. aria-labelledby is a fallback solution for complex UI components and situations where <label> is insufficient or inapplicable.

Related Terms

• Accessible Name
• aria-label
• aria-describedby
• WAI-ARIA
• Label

Frequently Asked Questions

When should I use aria-labelledby instead of aria-label?

Use aria-labelledby when the text for the label is already visibly present on the page. Use aria-label when there is no visible label and you need to provide purely "off-screen" text for assistive technologies (e.g., for a button with only an icon).

What happens if an ID specified in aria-labelledby does not exist?

If the browser cannot find an ID, it is simply ignored. If all referenced IDs are invalid, the browser falls back to the next method in the hierarchy for calculating the Accessible Name (e.g., the text content of the element). In the worst case, the element will have no accessible label, which is a clear WCAG violation.

Can I apply aria-labelledby to every HTML element?

Yes, aria-labelledby is a global ARIA attribute and can be applied to any HTML element. However, it is only meaningful for elements that require an Accessible Name. This includes interactive elements (like button, input, a), elements with a widget role (like role="dialog", role="slider"), and landmark regions (like <nav> or role="search").

How do screen readers concatenate the content when multiple IDs are present?

Screen readers announce the text contents of the elements in the order in which their IDs are listed in the aria-labelledby attribute. A space is inserted between the individual parts. aria-labelledby="id1 id2" results in the output "[Content of id1] [Content of id2]".

Note

This article is for knowledge transfer and does not constitute legal advice. When implementing digital accessibility, the specific legal requirements and standards must always be taken into account.

1. World Wide Web Consortium (W3C), “Accessible Rich Internet Applications (WAI-ARIA) 1.2.” 2023. [Online]. Available: https://www.w3.org/TR/wai-aria-1.2/ ⤴
2. W3C Web Accessibility Initiative (WAI), “W3C Using Aria: Erste Regel der ARIA-Nutzung.” 2018. [Online]. Available: https://www.w3.org/TR/using-aria/#firstrule ⤴
3. W3C, “H44: Using label elements to associate text labels with form controls,” 2023, [Online]. Available: https://www.w3.org/WAI/WCAG22/Techniques/html/H44 ⤴
4. “Accessible Name and Description Computation 1.2.” W3C, Oct. 2025. Accessed: Nov. 06, 2025. [Online]. Available: https://www.w3.org/TR/accname-1.2/ ⤴