このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

Element: ariaActiveDescendantElement プロパティ

Baseline 2025
Newly available

Since ⁨April 2025⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

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

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

解説

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

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

アクティブな子孫を取得

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

HTML

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

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

JavaScript

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

js
// 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 になるはずです。

仕様書

Specification
Accessible Rich Internet Applications (WAI-ARIA)
# dom-ariamixin-ariaactivedescendantelement

ブラウザーの互換性

関連情報