Eigenschap Relatie

`aria-owns`

Declareert een ouder-kindrelatie in de toegankelijkheidsstructuur wanneer de DOM-structuur dat niet uitdrukt. Reparenteert de gerefereerde elementen als kinderen van dit element voor hulptechnologie. Een krachtig hulpmiddel — gemakkelijk te misbruiken.

Wanneer te gebruiken

Alleen wanneer de DOM de kinderen niet op de plek kan plaatsen waar de toegankelijkheidsstructuur ze nodig heeft. Het meest voorkomende geval is een popup-listbox voor een combobox: de lijst staat aan het einde van <body> om z-index-redenen, maar semantisch hoort die bij de combobox. aria-owns op de combobox, verwijzend naar de ID van de listbox, geeft hulptechnologie de opdracht de listbox als een kind te behandelen.

Als de DOM zo kan worden geherstructureerd dat het kind een echte afstammeling is, heeft dat de voorkeur. aria-owns is de ontsnappingsroute — het werkt, maar omzeilt de natuurlijke controle dat de markup overeenkomt met de semantiek.

Gedrag

De waarde is een spatie-gescheiden lijst van element-ID’s. De toegankelijkheidsstructuur wordt herbouwd zodat elk gerefereerd element als kind van het eigenaarselement verschijnt, in de vermelde volgorde. De oorspronkelijke DOM-ouder verliest die kinderen in de toegankelijkheidsweergave.

Regels voor een geldige structuur:

Elke gerefereerde ID moet bestaan en uniek zijn.
Een element kan slechts door één ouder tegelijk worden ge-aria-owns-d. Hetzelfde element vanuit twee plaatsen bezitten levert ongedefinieerd gedrag op.
Bezit geen voorouder van jezelf. Dat creëert een cyclus in de toegankelijkheidsstructuur.
Het element moet nog steeds bereikbaar zijn in de DOM — display: none is toegestaan, maar een volledig losgekoppeld element niet.

Veelvoorkomende fouten

Verwijzen naar een ID die niet bestaat of is verwijderd in de laatste render.
aria-owns gebruiken terwijl de DOM de kinderen simpelweg correct kan nesten. Voegt complexiteit toe zonder voordeel.
Twee aria-owns-verwijzingen naar hetzelfde kind vanuit verschillende ouders — de hulptechnologie kiest willekeurig één.
Vergeten dat focusvolgorde losstaat van aria-owns. Het toetsenbord tabt nog steeds door de visuele DOM-volgorde; de toegankelijkheidsstructuur beïnvloedt alleen hoe schermlezers de toegankelijkshiërarchie doorlopen.
aria-owns inzetten om een focus- of scroll-in-beeld-probleem op te lossen. Het doet geen van beide.
Een regio bezitten die zijn eigen eigenaar bevat — creëert een cyclus en breekt de structuur.

Voorbeeld

<!-- Combobox waarvan de popup naar body is geporteerd vanwege stapelcontext -->
<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>

<!-- Listbox staat aan het einde van body, semantisch eigendom van de 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>