string

aria-controls

Identifie l'élément (ou les éléments) dont le contenu ou l'affichage est contrôlé par l'élément courant.

Description

aria-controls établit une relation entre un contrôle et la région qu’il pilote, en référençant un ou plusieurs id séparés par des espaces. Les technologies d’assistance peuvent permettre à l’utilisateur de naviguer directement vers la région contrôlée.

Syntaxe

<button aria-controls="panneau-contenu" aria-expanded="false">
  Afficher les détails
</button>
<div id="panneau-contenu" hidden>…</div>

Exemples

Accordéon :

<h3>
  <button aria-controls="faq-1" aria-expanded="false">
    Quelle est votre politique de retour ?
  </button>
</h3>
<div id="faq-1" hidden>
  <p>Vous pouvez retourner tout article sous 30 jours.</p>
</div>

Onglets :

<button role="tab" aria-controls="panneau-a" aria-selected="true" id="tab-a">Onglet A</button>
<button role="tab" aria-controls="panneau-b" aria-selected="false" id="tab-b">Onglet B</button>

<div role="tabpanel" id="panneau-a" aria-labelledby="tab-a">…</div>
<div role="tabpanel" id="panneau-b" aria-labelledby="tab-b" hidden>…</div>

Notes

Support variable : aria-controls est bien supporté par JAWS, mais NVDA et VoiceOver l’ignorent parfois. Il reste recommandé pour compléter la sémantique, mais ne pas en dépendre comme unique mécanisme de navigation.

Combiner avec aria-expanded : aria-controls indique quoi est contrôlé ; aria-expanded indique l’état (ouvert/fermé).

Support navigateurs