ARIA : attribut aria-controls
L'attribut global aria-controls identifie l'élément (ou les éléments) dont le contenu ou la présence est contrôlé·e par l'élément sur lequel cet attribut est défini.
Description
Lorsqu'un widget ou élément interactif, comme une liste déroulante (combobox en anglais), un onglet, un bouton, etc., sert à ajuster ou modifier un autre élément ou composant dans un document ou une application, l'attribut aria-controls permet d'associer de façon programmatique l'élément contrôlé à l'élément contrôleur. L'attribut aria-controls identifie l'élément (ou les éléments) dont le contenu ou la présence est contrôlé·e par l'élément sur lequel l'attribut est défini, quel que soit le type d'interaction qui déclenche ce comportement.
Un élément combobox possède un attribut aria-controls dont la valeur fait référence à l'élément qui sert de fenêtre contextuelle. aria-controls n'a besoin d'être défini que lorsque la fenêtre contextuelle est visible, mais il est valide et plus simple de référencer un élément même s'il n'est pas visible.
Autres exemples de contrôles :
- Les boutons d'un accordéon qui affichent ou masquent le contenu de leur panneau associé. Chaque bouton peut avoir un attribut
aria-controlsqui référence l'ID de l'élément contenant le contenu associé au contrôle déclencheur. - Un élément avec le rôle
scrollbar: la barre de défilement doit avoir un attributaria-controlsqui référence l'ID de l'élément qu'elle contrôle. - Un groupe d'onglets affichant chacun un panneau différent : chaque élément avec
role="tab"possède un attributaria-controlsqui référence sontabpanelassocié.
Exemple
Dans cet exemple d'onglets, chaque onglet contrôle un panneau :
<div class="tab-interface">
<div role="tablist" aria-label="Exemple d'onglets">
<span
role="tab"
aria-selected="true"
aria-controls="panel-1"
id="tab-1"
tabindex="0">
Premier onglet
</span>
<span
role="tab"
aria-selected="false"
aria-controls="panel-2"
id="tab-2"
tabindex="-1">
Deuxième onglet
</span>
<span
role="tab"
aria-selected="false"
aria-controls="panel-3"
id="tab-3"
tabindex="-1">
Troisième onglet
</span>
</div>
<div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
<p>Contenu du premier panneau</p>
</div>
<div
id="panel-2"
role="tabpanel"
tabindex="0"
aria-labelledby="tab-2"
class="display-none">
<p>Contenu du deuxième panneau</p>
</div>
<div
id="panel-3"
role="tabpanel"
tabindex="0"
aria-labelledby="tab-3"
class="display-none">
<p>Contenu du troisième panneau</p>
</div>
</div>
Note : ARIA ne modifie que l'arbre d'accessibilité d'un élément, c'est-à-dire la façon dont les technologies d'assistance présentent le contenu aux utilisateur·ice·s. ARIA ne change ni la fonctionnalité implicite ni le style.
Valeurs
- Liste d'ID
-
Liste d'un ou plusieurs identifiants (séparés par des espaces) des éléments contrôlés par l'élément courant.
Interfaces associées
Element.ariaControlsElements-
La propriété
ariaControlsElementsfait partie de l'interface de chaque élément. Sa valeur est un tableau d'instances de sous-classes deElementqui reflètent les références d'ID dans l'attributaria-controls(avec quelques particularités). ElementInternals.ariaControlsElements-
La propriété
ariaControlsElementsfait partie de l'interface de chaque élément personnalisé. Sa valeur est un tableau d'instances de sous-classes deElementqui reflètent les références d'ID dans l'attributaria-controls(avec quelques particularités).
Rôles associés
Utilisé dans TOUS les rôles.
Spécifications
| Specification |
|---|
| Accessible Rich Internet Applications (WAI-ARIA)> # aria-controls> |
Voir aussi
- L'attribut ARIA
aria-owns