Baseline 2025
Newly available
The ariaLabelledByElements property of the Element interface is an array containing the element (or elements) that provide an accessible name for the element it is applied to.
The property is primarily intended to provide a label for elements that don't have a standard method for defining their accessible name. For example, this might be used to name a generic container element, such as a <div> or <span>, or a grouping of elements, such as an image with a slider that can be used to change its opacity. The property takes precedence over other mechanisms for providing an accessible name for elements, and may therefore also be used to provide a name for elements that would normally get it from their inner content or from an associated element such as a label.
The aria-labelledby topic contains additional information about how the attribute and property should be used.
An array of elements. The inner text of these elements can be joined with spaces to get the accessible name.
When read, the returned array is a static and read-only. When written, the assigned array is copied: subsequent changes to the array do not affect the value of the property.
DescriptionThe property is a flexible alternative to using the aria-labelledby attribute to set the accessible name. Unlike aria-labelledby, the elements assigned to this property do not have to have an id attribute.
The property reflects the element's aria-labelledby attribute when it is defined, but only for listed reference id values that match valid in-scope elements. If the property is set, then the corresponding attribute is cleared. For more information about reflected element references and scope see Reflected element references in the Reflected attributes guide.
This example shows how ariaLabelledByElements can be used to get an ARIA label defined using aria-labelledby.
The HTML defines two <span> elements and references their ids in the aria-labelledby attribute of an <input>. The accessible name of the <input> is the concatenation of the inner text of the two referenced elements, separated by a space.
<span id="label_1">Street name</span>
<input aria-labelledby="label_1 label_2" />
<span id="label_2">(just the name, no "Street" or "Road" or "Place")</span>
#log {
height: 70px;
overflow: scroll;
padding: 0.5rem;
border: 1px solid black;
}
The code below first logs the value of the aria-labelledby attribute from Element.getAttribute() (a string listing the id values of the referenced elements). It then checks whether the ariaLabelledByElements is supported, and if so, logs its value. Finally it returns the accessible string, calculated by iterating through the elements and concatenating their inner text.
const logElement = document.querySelector("#log");
function log(text) {
logElement.innerText = `${logElement.innerText}${text}\n`;
logElement.scrollTop = logElement.scrollHeight;
}
const inputElement = document.querySelector("input");
log(`aria-labelledby: ${inputElement.getAttribute("aria-labelledby")}`);
// Feature test for ariaLabelledByElements
if ("ariaLabelledByElements" in Element.prototype) {
// Get ariaLabelledByElements
const labelElements = inputElement.ariaLabelledByElements;
log(`ariaLabelledByElements: ${labelElements}`);
// Log inner text of elements to get accessible name
const text = labelElements.map((e) => e.textContent.trim()).join(" ");
log(`Accessible name: ${text.trim()}`);
} else {
log("element.ariaLabelledByElements: not supported by browser");
}
The log below shows the original element references, the associated/returned elements, and the accessible name. Note that the example doesn't do anything with text entered into the street name <input>.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3