Propriété Relation

`aria-owns`

Déclare une relation parent-enfant dans l'arbre d'accessibilité lorsque la structure DOM ne l'exprime pas. Réaffecte les éléments référencés comme enfants de l'élément courant pour les technologies d'assistance. Un outil puissant — facile à mal utiliser.

Quand l’utiliser

Uniquement lorsque le DOM ne peut pas placer les enfants là où l’arbre d’accessibilité en a besoin. Le cas le plus courant est une listbox popup pour une combobox : la liste se trouve en fin de <body> pour des raisons de z-index, mais sémantiquement elle appartient à la combobox. aria-owns sur la combobox, pointant vers l’ID de la listbox, indique à la technologie d’assistance de traiter la listbox comme un enfant.

Si vous pouvez restructurer le DOM de sorte que l’enfant soit un vrai descendant, faites-le en priorité. aria-owns est la trappe de secours — elle fonctionne, mais elle contourne tout contrôle naturel de l’auteur sur la cohérence entre le balisage et la sémantique.

Comportement

La valeur est une liste d’ID d’éléments séparés par des espaces. L’arbre d’accessibilité est reconstruit de sorte que chaque élément référencé apparaisse comme enfant de l’élément propriétaire, dans l’ordre indiqué. Le parent DOM d’origine perd ces enfants dans la vue de l’arbre d’accessibilité.

Règles pour maintenir l’arbre valide :

Chaque ID référencé doit exister et être unique.
Un élément ne peut être possédé via aria-owns que par un seul parent à la fois. Posséder le même élément depuis deux endroits produit un comportement non défini.
Ne possédez pas un ancêtre de vous-même. Cela crée un cycle dans l’arbre d’accessibilité.
L’élément doit rester accessible dans le DOM — display: none est autorisé, mais un élément complètement détaché ne l’est pas.

Échecs courants

Pointer vers un ID qui n’existe pas ou a été supprimé lors du dernier rendu.
Utiliser aria-owns lorsque le DOM pourrait simplement imbriquer correctement les enfants. Ajoute de la complexité sans bénéfice.
Deux références aria-owns pour le même enfant depuis des parents différents — la technologie d’assistance en choisit une arbitrairement.
Oublier que l’ordre de focus est indépendant d’aria-owns. Le clavier continue de parcourir les éléments dans l’ordre DOM visuel ; l’arbre d’accessibilité n’affecte que la façon dont les lecteurs d’écran traversent la hiérarchie d’accessibilité.
Recourir à aria-owns pour résoudre un problème de focus ou de défilement. Il ne fait ni l’un ni l’autre.
Posséder une région qui contient son propre propriétaire — crée un cycle, brise l’arbre.

Exemple

<!-- Combobox dont le popup est porté vers body pour le contexte d'empilement -->
<div
  role="combobox"
  id="city-cb"
  aria-haspopup="listbox"
  aria-expanded="true"
  aria-owns="city-listbox"
>
  <input type="text" aria-controls="city-listbox" aria-activedescendant="city-opt-2">
</div>

<!-- La listbox se trouve en fin de body, possédée sémantiquement par la combobox -->
<ul role="listbox" id="city-listbox">
  <li role="option" id="city-opt-1">London</li>
  <li role="option" id="city-opt-2" aria-selected="true">Paris</li>
</ul>