ariaActiveDescendantElement はElement インターフェイスのプロパティで、フォーカスがcomposite ウィジェット、combobox、textbox、group、application のいずれかにあるときの、現在のアクティブな要素を表します。

aria-activedescendant のトピックには、この属性とプロパティの使用方法に関する追加情報が含まれています。

値

HTMLElement のサブクラスで、アクティブな子孫要素を表します。アクティブな子孫がなければnull です。

解説

このプロパティは、aria-activedescendant 属性の使用に代わる柔軟な代替手段です。aria-activedescendant とは異なり、このプロパティに割り当てる要素は、id 属性を必ずしも持つ必要はありません。

このプロパティは、定義されている場合に要素のaria-activedescendant 属性を反映しますが、有効なスコープ内要素と一致する参照先のid 値に対してのみ反映されます。このプロパティを設定すると、対応する属性がクリアされます。反映される要素への参照とスコープに関するより詳細な情報については、「属性の反映」ガイドの要素の参照の反映を参照してください。

例

アクティブな子孫を取得

この例では、ariaActiveDescendantElement を使用することで現在アクティブな子孫要素を取得する方法を示しています。

HTML

この HTML では、色々な種類の道路を選べるリストボックスを定義しています。これは、<div> 要素にlistbox ロールを付け、それぞれの選択肢に対応する<div> アイテムを含む構造です。アクティブな子孫要素は、id がavenue の要素をaria-activedescendant を使用して初期設定します。

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

<pre></pre>

#log {  height: 70px;  overflow: scroll;  padding: 0.5rem;  border: 1px solid black;}

JavaScript

下記コードはまず、ariaActiveDescendantElement に対応しているかどうかを調べます。このプロパティに対応している場合、コードはaria-activedescendant の値（参照される要素のid）、プロパティ要素、要素のテキストコンテンツをElement.getAttribute() を使用してログ出力します。

const logElement = document.querySelector("#log");function log(text) {  logElement.innerText = `${logElement.innerText}${text}\n`;  logElement.scrollTop = logElement.scrollHeight;}

// 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 に対応していません");}

結果

下記ログは、以上のコードの出力を示して表示させています。aria-activedescendant プロパティから返される値は"avenue" になるはずであり、関連付けられた要素はHTMLDivElement 要素になるはずで、その要素内のテキストはAvenue になるはずです。

仕様書

ブラウザーの互換性

関連情報

• aria-activedescendant 属性
• ElementInternals.ariaActiveDescendantElement
• 要素の参照の反映（「属性の反映」ガイド）