The aria-labelledby attribute allows an element to derive its accessible name from one or more other elements on the page by referencing their ids. It’s particularly useful when you want to associate visible text from existing DOM elements rather than embedding duplicate text.

This attribute has higher precedence than other naming methods—like aria-label, <label>, or the element’s inner text—when assistive technologies compute the accessible name.

When to Use (and When Not To)

Use aria-labelledby when:

• Visible labels exist elsewhere in the DOM that can semantically describe the element—e.g., heading or textual context.

• Combining text from multiple sources (e.g., heading + context) makes the accessible name richer.

• You want to reuse text already visible, avoiding duplication and aiding localization.

Prefer native HTML when possible:

• Use <label> for form controls, as it provides added behaviors (e.g., click-to-focus).

• Use <legend> for fieldsets and <caption> for tables. These are more robust and semantic.

Bad Example: Overusing aria-labelledby When Better Options Exist

<nav aria-labelledby="nav-title">
  <h2 id="nav-title">Related Content</h2>
  <ul>…</ul>
</nav>

Why it’s unnecessary: If the <h2> is inside the <nav>, screen readers might already infer a name. Native HTML (e.g., a visible <h2>) is often sufficient and more semantic.

Good Examples: Proper Use of aria-labelledby

Example 1: Dialog Labeling

<div role="dialog" id="dialog1" aria-labelledby="dialog1_label" aria-modal="true">
  <h2 id="dialog1_label">Add Delivery Address</h2>
  …
</div>

Why it works: The dialog element uses visible text to provide its accessible name, which is critical for screen reader announcement.

Example 2: Concatenated Accessible Name for a Link

<h2 id="headline">Storms hit east coast</h2>
<p>
  <a id="p123" href="news.html" aria-labelledby="p123 headline">Read more…</a>
</p>

Here, the link’s accessible name becomes: “Read more… Storms hit east coast”—giving users clear context.

Example 3: Form Input with Multi-Part Label

<span id="shipping">Shipping Address</span>
<span id="str">Street</span>
<input type="text" id="ship-street" aria-labelledby="shipping str">

Outcome: Screen readers combine both identifiers, yielding “Shipping Address Street”, which is clearer and more informative.

Quick Reference Table

Best Practices & Pitfalls to Avoid

• Ordering matters: The order of referenced IDs influences how text is concatenated.

• Empty ID references are no-ops: Unlike alt=””, empty aria-labelledby does nothing.

• Avoid broken references: If an ID changes or is removed, the accessible name breaks—always keep them in sync.

• Hidden content is valid: You can use hidden elements (via CSS or hidden attribute) as label sources.

• Test thoroughly: Always confirm with assistive technologies that the named relationships behave as expected.

Final Thoughts

Use native HTML semantics whenever possible—aria-labelledby is a powerful fallback when visible labeling needs to be programmatically associated across the DOM. It helps avoid duplication, improves localization, and keeps the accessible name dynamic. But usage must be conscientious—misordered IDs, broken references, or replacing native labels unnecessarily can hinder rather than help accessibility.