Difference between `aria-label` and `aria-labelledby`

The aria-label and aria-labelledby attributes are both used in web accessibility to provide labels for elements, but they serve different purposes and are used in different scenarios. Here’s a breakdown of the differences between them:

aria-label

• Purpose: aria-label provides an explicit label for an element. The label is a string that is directly defined within the aria-label attribute.

• Usage: Use aria-label when you want to provide a custom, hidden label for an element that does not have a visible label in the document. It’s often used for elements like buttons or icons where the visible text does not fully describe the element’s function or when there’s no visible text at all.

• Example:
  

  <button aria-label="Close">X</button>

In this example, the button visually displays "X", but the screen reader will announce "Close" because of the aria-label.

• Consideration: The label provided by aria-label is not visible on the screen. It’s purely for assistive technologies like screen readers.

aria-labelledby

• Purpose: aria-labelledby refers to the id of one or more elements that contain the text that labels the current element. This means the label is derived from the content of other elements in the document.

• Usage: Use aria-labelledby when there is an existing visible element (or elements) on the page that provides a suitable label. It’s particularly useful for linking to existing text that already describes the element.

• Example:
  

  <label id="username-label">Username:</label>
  <input type="text" id="username" aria-labelledby="username-label" />

In this example, the input field is labeled by the label element with id="username-label". The screen reader will announce the content of the label ("Username:") when the input field is focused.

• Consideration: Unlike aria-label, the label provided by aria-labelledby is visible in the document, making it more natural and consistent with how most labels work on a webpage.

Key Differences

• Content Source:

  • aria-label: The label is defined directly as a string within the attribute.
  • aria-labelledby: The label is derived from the content of another element(s) in the DOM, which is referenced by id.

• Visibility:

  • aria-label: The label is hidden and only accessible to assistive technologies.
  • aria-labelledby: The label is visible on the screen because it references existing elements.

• Use Case:

  • aria-label: Use when you need to provide a label for an element that has no visible label or when the visible label does not accurately describe the element’s purpose.
  • aria-labelledby: Use when there is already an appropriate visible label or text that can be associated with the element.

Practical Example:

Here’s a situation where both might be used together:

<div id="name-header">Full Name</div>
<input type="text" aria-labelledby="name-header" aria-label="Enter your full name" />

In this example:

• aria-labelledby references id="name-header", which is the visible label.
• aria-label provides additional instructions or clarification that is not visible but is important for accessibility.

Using both attributes together might be redundant unless you need to provide extra information not covered by the visible label. Typically, you would use one or the other, depending on the context.