Element：ariaLabelledByElements 屬性
Element 介面的 ariaLabelledByElements 屬性是一個數組，其中包含為應用該屬性的元素提供可訪問名稱的元素（一個或多個）。
該屬性主要用於為沒有標準方法來定義其可訪問名稱的元素提供標籤。例如，它可以用於命名一個通用的容器元素，如 <div> 或 <span>，或者一組元素，例如一個圖片以及一個用於改變其不透明度的滑塊。該屬性優先於其他提供元素可訪問名稱的機制，因此也可以用於為通常從其內部內容或關聯元素（如 <label>）獲取名稱的元素提供名稱。
aria-labelledby 主題包含有關如何使用該屬性和屬性的更多資訊。
值
一個元素陣列。這些元素的內部文字可以與空格連線起來以獲得可訪問名稱。
讀取時，返回的陣列是靜態的且只讀的。寫入時，將複製分配的陣列：之後對陣列的更改不會影響屬性的值。
描述
該屬性是使用 aria-labelledby 屬性來設定可訪問名稱的一種靈活替代方案。與 aria-labelledby 不同，分配給此屬性的元素不必具有 id 屬性。
當 aria-labelledby 屬性已定義時，此屬性會反映該屬性，但僅限於列出的引用 id 值，這些值匹配有效的範圍內的元素。如果設定了該屬性，則相應的屬性將被清除。有關反射的元素引用和範圍的更多資訊，請參閱Attribute reflection指南中的Reflected element references。
示例
獲取可訪問名稱
此示例顯示瞭如何使用 ariaLabelledByElements 來獲取使用 aria-labelledby 定義的 ARIA 標籤。
HTML
HTML 定義了兩個 <span> 元素，並在 <input> 的 aria-labelledby 屬性中引用了它們的 id。<input> 的可訪問名稱是兩個引用元素內部文字的連線，中間用空格分隔。
<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>
JavaScript
下面的程式碼首先使用 Element.getAttribute() (列出引用元素 id 值的字串) 記錄 aria-labelledby 屬性的值。然後它檢查 ariaLabelledByElements 是否受支援，如果受支援，則記錄其值。最後，它透過迭代元素並連線它們的內部文字來計算並返回可訪問字串。
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");
}
結果
下面的日誌顯示了原始元素引用、關聯/返回的元素以及可訪問名稱。請注意，該示例不對輸入到街道名稱 <input> 中的文字做任何處理。
規範
| 規範 |
|---|
| 無障礙富網際網路應用程式 (WAI-ARIA) # dom-ariamixin-arialabelledbyelements |
瀏覽器相容性
載入中…
另見
aria-labelledby屬性ElementInternals.ariaLabelledByElements- Attribute reflection 指南中的Reflected element references。