Element: ariaControlsElements プロパティ
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.
ariaControlsElements は Element インターフェイスのプロパティで、適用先の要素によって制御される要素を含む配列です。
例えば、この要素は combobox に設定され、ポップアップする要素を示す場合や、 scrollbar に設定され、制御する要素の ID を示す場合があります。
aria-controls のトピックには、この属性とプロパティの使用方法に関する追加情報が含まれています。
値
この要素に制御される要素を表す、 HTMLElement のサブクラスの配列です。
読み取り時には、返される配列は静的で読み取り専用です。 書き込み時には、代入された配列はコピーされます。その後配列に変更を加えても、プロパティの値には影響しません。
解説
このプロパティは、制御対象の要素を設定するための aria-controls 属性の柔軟な代替手段です。
aria-controls とは異なり、このプロパティに割り当てる要素は id 属性を必ずしも持つ必要はありません。
このプロパティは、定義されている場合に要素の aria-controls 属性を反映しますが、有効なスコープ内要素と一致する参照先の id 値に対してのみ反映されます。
このプロパティを設定すると、対応する属性がクリアされます。
反映される要素への参照とスコープに関するより詳細な情報については、「属性の反映」ガイドの要素の参照の反映を参照してください。
例
制御される要素を取得
この例では、ariaControlsElements を使用して、aria-controls で設定された制御対象の要素を取得する方法が表示されます。
HTML
この HTML はまず、<button> 要素と、それを制御する 2 つの <div> 要素（panel1 と panel2）を定義します。
制御対象のパネルへの参照は、ボタンの aria-controls 属性に掲載されています。
<button id="toggleButton" aria-controls="panel1 panel2" aria-expanded="false">
詳細を表示
</button>
<div class="panel" id="panel1" aria-hidden="true">
<p>パネル 1 はボタンで開かれ/閉じられます。</p>
</div>
<div class="panel" id="panel2" aria-hidden="true">
<p>パネル 2 はボタンで開かれ/閉じられます。</p>
</div>
.panel {
display: none; /* 初期状態で非表示 */
border: 1px solid #cccccc;
padding: 5px;
margin-top: 5px;
}
JavaScript
このコードはまず、ボタンの aria-expanded 属性に基づいて、パネルが開いたり非表示になったりする状態を設定します。
const toggleButton = document.querySelector("#toggleButton");
const panel1 = document.querySelector("#panel1");
const panel2 = document.querySelector("#panel2");
toggleButton.addEventListener("click", () => {
const isExpanded = toggleButton.getAttribute("aria-expanded") === "true";
toggleButton.setAttribute("aria-expanded", !isExpanded);
panel1.style.display = isExpanded ? "none" : "block";
panel1.setAttribute("aria-hidden", isExpanded); // 非表示の場合は true、表示の場合は true。
panel2.style.display = isExpanded ? "none" : "block";
panel2.setAttribute("aria-hidden", isExpanded); // 非表示の場合は true、表示の場合は true。
});
次に、この例では aria-controls 属性の値を Element.getAttribute()（参照される要素の id 値を並べた文字列）で取得します。
その後、ariaControlsElements プロパティに対応してかどうかを確認し、対応している場合はその値をログに記録します。
最後に、制御対象のそれぞれの要素の内部テキストを返してログに記録します。
log(`aria-controls: ${toggleButton.getAttribute("aria-controls")}`);
// ariaControlsElements の機能検出
if ("ariaControlsElements" in Element.prototype) {
// ariaControlsElements を取得
const controlledElements = toggleButton.ariaControlsElements;
log(`ariaControlsElements: ${controlledElements}`);
// 各 ariaControlsElements の innerText を列挙
controlledElements.forEach((controlled) => {
log(` Controlled element text: ${controlled.textContent.trim()}`);
});
} else {
log("element.ariaControlsElements: ブラウザーが対応していません");
}
結果
下記ボタンをクリックすると、パネルの表示/非表示を切り替えられます。 ログ出力する内容は、元の要素参照、関連付けられた/返された要素、およびそれぞれの要素の内部テキストです。
仕様書
| Specification |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariacontrolselements |
ブラウザーの互換性
関連情報
aria-controls属性ElementInternals.ariaControlsElements- 要素の参照の反映（「属性の反映」ガイド）