ARIA : attribut aria-controls

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-controls qui 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 attribut aria-controls qui 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 attribut aria-controls qui référence son tabpanel associé.

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>

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é ariaControlsElements fait partie de l'interface de chaque élément. Sa valeur est un tableau d'instances de sous-classes de Element qui reflètent les références d'ID dans l'attribut aria-controls (avec quelques particularités).

ElementInternals.ariaControlsElements

La propriété ariaControlsElements fait partie de l'interface de chaque élément personnalisé. Sa valeur est un tableau d'instances de sous-classes de Element qui reflètent les références d'ID dans l'attribut aria-controls (avec quelques particularités).

Rôles associés

Utilisé dans TOUS les rôles.

Spécifications

Voir aussi

• L'attribut ARIA aria-owns