This content originally appeared on DEV Community and was authored by Syed Ammar
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-labelprovides an explicit label for an element. The label is a string that is directly defined within thearia-labelattribute.Usage: Use
aria-labelwhen 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-labelis not visible on the screen. It’s purely for assistive technologies like screen readers.
aria-labelledby
Purpose:
aria-labelledbyrefers to theidof 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-labelledbywhen 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-labelledbyis 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-labelledbyreferencesid="name-header", which is the visible label. -
aria-labelprovides 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.
This content originally appeared on DEV Community and was authored by Syed Ammar
Syed Ammar | Sciencx (2024-08-28T11:31:21+00:00) Difference between `aria-label` and `aria-labelledby`. Retrieved from https://www.scien.cx/2024/08/28/difference-between-aria-label-and-aria-labelledby/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.