Propriété Relation

`aria-controls`

Désigne le ou les éléments dont la présence ou le contenu est régi par ce contrôle. Associations courantes : un onglet contrôle son tabpanel, un bouton de divulgation contrôle une région révélée. La prise en charge par les technologies d'assistance est inégale — à utiliser avec parcimonie.

Quand l’utiliser

Sur un contrôle dont l’activation modifie un élément différent de la page — les exemples canoniques sont la relation onglet → tabpanel et un bouton de divulgation → panneau révélé. Cela indique à la technologie d’assistance que « actionner ce widget affectera celui-là », offrant aux utilisateurs avancés un moyen de passer du contrôle à l’élément contrôlé.

Ne l’utilisez pas pour chaque interaction. La plupart des gestionnaires de clic n’ont pas besoin de aria-controls ; réservez-le aux cas où l’élément contrôlé est réellement séparé dans le DOM et où l’utilisateur bénéficie de connaître la connexion.

Comment il se comporte

La valeur est une liste d’identifiants d’éléments séparés par des espaces pour le ou les éléments contrôlés. L’élément contrôlé doit exister dans le DOM au moment où la relation est interrogée — si vous montez le tabpanel seulement à l’activation de l’onglet, la référence est pendante pour les utilisateurs de technologies d’assistance jusqu’à l’apparition du panneau.

La prise en charge est le point faible. JAWS expose un raccourci « aller à l’élément contrôlé », mais VoiceOver et NVDA ignorent largement l’attribut en dehors de motifs spécifiques (onglets, comboboxes). Cela signifie que aria-controls est rarement ce qui rend une fonctionnalité accessible — c’est une amélioration en plus des rôles corrects, de la gestion du focus et de aria-expanded. Construisez d’abord le motif correctement ; ajoutez aria-controls en dernier.

Erreurs fréquentes

Traiter aria-controls comme un substitut au déplacement du focus. Un bouton « Aller aux résultats » doit déplacer le focus à l’activation ; ajouter aria-controls ne fait pas cela.
Pointer vers un élément qui n’est pas encore dans le DOM. La référence ne résout rien jusqu’au rendu du panneau.
Oublier de définir aussi aria-expanded sur un bouton de divulgation. aria-controls dit « j’influence cette chose » ; aria-expanded dit « et elle est actuellement ouverte / fermée ».
Utiliser aria-controls sur un select personnalisé pour pointer vers une liste d’options — le bon motif est role="combobox" avec aria-controls sur le champ, et aria-activedescendant pour l’option mise en évidence.
Saupoudrer aria-controls sur chaque bouton « pour être complet ». Du bruit ; rien n’en dépend.

Exemple

<button
  type="button"
  aria-expanded="false"
  aria-controls="faq-1-answer"
>
  What is your refund policy?
</button>
<div id="faq-1-answer" hidden>
  Refunds are processed within 14 days …
</div>