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.
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 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()
を使用してログ出力します。
// 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> |
ブラウザーの互換性
Loading…