Element:ariaActiveDescendantElement 屬性

基準線 2025
新推出

自 ⁨2025 年 4 月⁩起,此功能適用於最新裝置和瀏覽器版本。此功能可能不適用於較舊的裝置或瀏覽器。

Element 介面的 ariaActiveDescendantElement 屬性表示當焦點位於 composite 部件、comboboxtextboxgroupapplication 上時的當前活動元素。

有關該屬性和特性的用法,請參閱 aria-activedescendant 主題。

HTMLElement 的一個子類,表示活動後代,如果沒有活動後代則為 null

描述

該屬性是使用 aria-activedescendant 屬性的一個靈活替代方案。與 aria-activedescendant 不同,分配給此屬性的元素不必具有 id 屬性。

該屬性會反映元素 aria-activedescendant 屬性(當其已定義時),但僅限於匹配有效作用域內元素的引用 id 值。如果設定了該屬性,則會清除相應的屬性。有關反射元素引用和作用域的更多資訊,請參閱 Reflected attributes 指南中的 Reflected element references

示例

獲取活動後代

此示例展示瞭如何使用 ariaActiveDescendantElement 來獲取當前的活動後代。

HTML

HTML 定義了一個列表框,用於選擇不同型別的街道,它由一個具有 listbox role<div> 元素以及每個選項的巢狀 <div> 項組成。活動後代最初透過 aria-activedescendant 設定為 idavenue 的元素。

html
<div id="streetType" role="listbox" aria-activedescendant="avenue">
  <div>Street</div>
  <div id="avenue">Avenue</div>
  <div>Lane</div>
</div>

JavaScript

下面的程式碼首先檢查 ariaActiveDescendantElement 是否受支援。如果屬性受支援,程式碼將使用 Element.getAttribute() 記錄 aria-activedescendant 的值(被引用元素的 id)、屬性元素及其文字內容。

js
// Feature test for ariaActiveDescendantElement
if ("ariaActiveDescendantElement" in Element.prototype) {
  log(`getAttribute(): ${streetType.getAttribute("aria-activedescendant")}`);
  log(`ariaActiveDescendantElement: ${streetType.ariaActiveDescendantElement}`);
  log(`text: ${streetType.ariaActiveDescendantElement?.textContent.trim()}`);
} else {
  log("ariaActiveDescendantElement not supported by browser");
}

結果

下面的日誌顯示了上述程式碼的輸出。從 aria-activedescendant 屬性返回值應為 "avenue",關聯的元素應為 HTMLDivElement 元素,該元素中的文字應為 Avenue

規範

規範
無障礙富網際網路應用程式 (WAI-ARIA)
# dom-ariamixin-ariaactivedescendantelement

瀏覽器相容性

另見