HtmlConceptBeginner · 3 min read

What is aria-labelledby attribute in HTML and How to Use It

The aria-labelledby attribute in HTML links an element to another element that labels it, improving accessibility by providing a clear, descriptive name for screen readers. It helps users who rely on assistive technology understand the purpose of elements on a webpage.

⚙️

How It Works

The aria-labelledby attribute works like a name tag for elements on a webpage. Imagine you are at a party and someone wears a badge with their name on it. This badge helps others know who they are. Similarly, aria-labelledby points to another element that acts as a label or name for the current element.

Screen readers, which read out webpage content for people who cannot see the screen, use this attribute to find the label text. Instead of guessing what an element is, the screen reader reads the label from the linked element, making the page easier to understand.

This attribute takes one or more IDs of other elements as its value. The text content of those elements is combined and used as the accessible name for the element with aria-labelledby.

💻

Example

This example shows a button with a visible label in a separate element. The button uses aria-labelledby to connect to that label, so screen readers read the label when focusing on the button.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>aria-labelledby Example</title>
</head>
<body>
  <div id="label1">Submit Form</div>
  <button aria-labelledby="label1"> </button>
</body>
</html>

Output

A button with no visible text but screen readers announce "Submit Form" when focused.

🎯

When to Use

Use aria-labelledby when you want to provide a clear, accessible label for an element but the label is not inside the element itself. This often happens when the label is visually separate or styled differently.

Common cases include custom buttons, icons, form controls, or complex widgets where the visible label is outside the interactive element. It ensures screen reader users get the correct description without cluttering the UI.

For example, if you have an icon button with no text, you can use aria-labelledby to point to a nearby text label that describes the button’s action.

✅

Key Points

Links an element to its label by referencing other element IDs.
Improves accessibility for screen reader users.
Can reference multiple elements by listing their IDs separated by spaces.
Use when the label is outside the element or when multiple elements form the label.
Different from aria-label, which uses a string directly.

✅

Key Takeaways

The aria-labelledby attribute connects an element to another element that labels it for screen readers.

It improves accessibility by providing clear, descriptive names for elements without visible text.

Use it when the label is separate from the element or when multiple elements form the label.

It references one or more element IDs whose text is combined as the accessible name.

It is different from aria-label, which uses a direct text string instead of referencing elements.