Element: ariaActiveDescendantElement プロパティ

値

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

解説

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

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

例

アクティブな子孫を取得

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

HTML

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

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

<pre id="log"></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
• 要素の参照の反映（「属性の反映」ガイド）