string

aria-owns

Établit une relation de parenté entre l'élément courant et un ou plusieurs éléments qui ne sont pas ses descendants directs dans le DOM.

Description

aria-owns permet de déclarer qu’un élément “possède” logiquement d’autres éléments, même si ceux-ci ne sont pas ses enfants dans le DOM. C’est utile quand la structure ARIA souhaitée ne peut pas correspondre à la structure DOM réelle (portails, modals rendus à la racine du body, menus déroulants en position fixe…).

Syntaxe

<ul role="tree" aria-owns="noeud-enfant-externe">
  <li role="treeitem">Élément 1</li>
</ul>
<!-- Ailleurs dans le DOM -->
<li role="treeitem" id="noeud-enfant-externe">Élément externe</li>

Exemples

Menu déroulant rendu en dehors du bouton déclencheur :

<button aria-haspopup="menu"
        aria-expanded="true"
        aria-owns="menu-principal">
  Navigation
</button>

<!-- Portail rendu à la racine du body -->
<ul id="menu-principal" role="menu">
  <li role="menuitem">Accueil</li>
  <li role="menuitem">À propos</li>
</ul>

Notes

Utiliser en dernier recours : restructurer le DOM est toujours préférable à l’utilisation d’aria-owns. La relation DOM naturelle est plus robuste et mieux supportée.

Un seul propriétaire : un élément ne peut avoir qu’un seul propriétaire. Si un élément est référencé par aria-owns de plusieurs parents, le comportement est indéfini.

Pas de cycles : un élément ne peut pas être à la fois propriétaire et enfant de l’élément qu’il possède.

Support navigateurs