Element : propriété ariaControlsElements
Baseline
2025
Nouvellement disponible
Depuis April 2025, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.
La propriété ariaControlsElements de l'interface Element est un tableau contenant les éléments contrôlés par l'élément auquel elle est appliquée.
Par exemple, cela peut être défini sur une boîte combinée pour indiquer l'élément qu'elle affiche, ou sur une scrollbar pour indiquer l'ID de l'élément qu'elle contrôle.
Le sujet aria-controls contient des informations supplémentaires sur la manière dont l'attribut et la propriété doivent être utilisés.
Valeur
Un tableau de sous-classes de HTMLElement, représentant les éléments contrôlés par cet élément.
Lorsqu'elle est lue, le tableau retourné est statique et en lecture seule. Lorsqu'elle est écrite, le tableau attribué est copié : les modifications ultérieures du tableau n'affectent pas la valeur de la propriété.
Description
La propriété est une alternative flexible à l'utilisation de l'attribut aria-controls pour définir les éléments contrôlés.
Contrairement à aria-controls, les éléments attribués à cette propriété n'ont pas besoin d'avoir un attribut id.
La propriété reflète l'attribut aria-controls lorsqu'il est défini, mais uniquement pour les valeurs de référence id répertoriées qui correspondent à des éléments valides dans la portée.
Si la propriété est définie, l'attribut correspondant est alors effacé.
Pour plus d'informations sur les références d'éléments réfléchis et la portée, voir Références d'éléments réfléchis dans le guide Réflexion des attributs.
Exemples
Obtenir les éléments contrôlés
Cet exemple montre comment ariaControlsElements peut être utilisé pour obtenir les éléments contrôlés qui ont été définis à l'aide de aria-controls.
HTML
Le HTML définit d'abord un élément HTML <button> et deux éléments <div>, panneau1 et panneau2, qu'il contrôle.
Les références aux panneaux contrôlés sont listées dans l'attribut aria-controls du bouton.
<button
id="boutonBascule"
aria-controls="panneau1 panneau2"
aria-expanded="false">
Afficher les détails
</button>
<div class="panneau" id="panneau1" aria-hidden="true">
<p>Panneau1 ouvert/fermé par le bouton.</p>
</div>
<div class="panneau" id="panneau2" aria-hidden="true">
<p>Panneau2 ouvert/fermé par le bouton.</p>
</div>
.panneau {
display: none; /* Initialement caché */
border: 1px solid #cccccc;
padding: 5px;
margin-top: 5px;
}
JavaScript
Le code configure d'abord les panneaux pour qu'ils puissent être ouverts ou cachés en fonction de l'attribut aria-expanded du bouton.
const boutonBascule = document.querySelector("#boutonBascule");
const panneau1 = document.querySelector("#panneau1");
const panneau2 = document.querySelector("#panneau2");
boutonBascule.addEventListener("click", () => {
const estEtendu = boutonBascule.getAttribute("aria-expanded") === "true";
boutonBascule.setAttribute("aria-expanded", !estEtendu);
panneau1.style.display = estEtendu ? "none" : "block";
panneau1.setAttribute("aria-hidden", estEtendu); // true lorsque caché, false lorsqu'affiché.
panneau2.style.display = estEtendu ? "none" : "block";
panneau2.setAttribute("aria-hidden", estEtendu); // true lorsque caché, false lorsqu'affiché.
});
Ensuite, l'exemple obtient la valeur de l'attribut aria-controls avec Element.getAttribute() (une chaîne de caractères listant les valeurs id des éléments référencés).
Il vérifie ensuite si la propriété ariaControlsElements est prise en charge, et si c'est le cas, enregistre sa valeur.
Enfin, il retourne et enregistre le texte interne de chacun des éléments contrôlés.
journaliser(`aria-controls: ${boutonBascule.getAttribute("aria-controls")}`);
// Test de fonctionnalité pour ariaControlsElements
if ("ariaControlsElements" in Element.prototype) {
// Obtenir ariaControlsElements
const elementsControles = boutonBascule.ariaControlsElements;
journaliser(`ariaControlsElements: ${elementsControles}`);
// Lister le texte interne de chacun des ariaControlsElements
elementsControles.forEach((elementControle) => {
journaliser(
` Texte de l'élément contrôlé : ${elementControle.textContent.trim()}`,
);
});
} else {
journaliser(
"element.ariaControlsElements: n'est pas pris en charge par le navigateur",
);
}
Résultat
Cliquez sur le bouton ci-dessous pour afficher et masquer les panneaux. Le journal affiche les références d'éléments d'origine, les éléments associés/retournés et le texte interne de chaque élément.
Spécifications
| Spécification |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariacontrolselements |
Compatibilité des navigateurs
Voir aussi
- L'attribut ARIA
aria-controls - La propriété
ElementInternals.ariaControlsElements - Références d'éléments réfléchis dans le guide Réflexion des attributs