Aria-label vs aria-labelledby: Key Differences and Usage

aria-label provides a direct text label for an element, while aria-labelledby references another element that labels it. Use aria-label for simple, standalone labels and aria-labelledby when the label is already visible elsewhere on the page.

Quick Comparison

Here is a quick side-by-side comparison of aria-label and aria-labelledby attributes.

Factor	aria-label	aria-labelledby
Type of Label	Direct text string	References another element's text
Usage	Use when no visible label exists	Use when label is visible on page
Content	Plain text only	Can include complex HTML content
Multiple Elements	No	Yes, can reference multiple IDs
Screen Reader Behavior	Reads the given text as label	Reads the referenced element's text as label

Key Differences

aria-label is an attribute where you write the label text directly inside the attribute. This is useful when the element has no visible label on the page, so you provide a clear name for screen readers.

On the other hand, aria-labelledby points to the id of one or more elements that already contain the label text. This means the label is visible on the page, and screen readers will read that text as the label for the element.

Because aria-labelledby references existing elements, it can include rich content like formatting or multiple elements combined, while aria-label only accepts plain text. This makes aria-labelledby more flexible but requires the label to be present in the DOM.

Code Comparison

html

<button aria-label="Close menu">×</button>

Output

A button with a visible × symbol but screen readers read it as 'Close menu'

aria-labelledby Equivalent

html

<span id="close-label">Close menu</span>
<button aria-labelledby="close-label">×</button>

Output

A button with a visible × symbol and a visible label 'Close menu' that screen readers read as the button's label

When to Use Which

Choose aria-label when your element has no visible label and you want to provide a simple, clear text label for screen readers.

Choose aria-labelledby when the label is already visible on the page, so you can reference it and keep your HTML semantic and DRY (Don't Repeat Yourself).

Using aria-labelledby helps maintain consistency and allows richer label content, while aria-label is quick and straightforward for simple cases.

Key Takeaways

aria-label provides a direct text label inside the attribute.

aria-labelledby references visible elements by their IDs for labeling.

Use aria-label when no visible label exists.

Use aria-labelledby to reuse existing visible labels.

aria-labelledby supports richer, multi-element labels.