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 thearia-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 theid
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 byaria-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 byid
.
-
-
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
referencesid="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.
Top comments (0)