Egenskab Relation

`aria-owns`

Erklærer et forælder-barn-forhold i tilgængelighedstræet, når DOM-strukturen ikke udtrykker det. Genforeldrer de refererede elementer som børn af dette element i AT's øjne. Et kraftfuldt redskab — let at misbruge.

Hvornår bruges det

Kun når DOM ikke kan placere børnene, hvor tilgængelighedstræet har brug for dem. Det hyppigste tilfælde er en popup-listbox til en combobox: listen lever i slutningen af <body> af z-index-årsager, men semantisk hører den til comboboxen. aria-owns på comboboxen, der peger på listboxens ID, fortæller AT at behandle listboxen som et barn.

Hvis man kan omstrukturere DOM, så barnet er et ægte efterkomme-element, bør man gøre det. aria-owns er nødudgangen — den virker, men omgår enhver forfatters naturlige fornuftstjek om, at markeringen matcher semantikken.

Sådan fungerer det

Værdien er en mellemrumssepareret liste af element-ID’er. Tilgængelighedstræet genopbygges, så hvert refereret element fremstår som et barn af det ejende element i den angivne rækkefølge. Den oprindelige DOM-forælder mister disse børn i AT-visningen.

Regler for at holde træet gyldigt:

Hvert refereret ID skal eksistere og være unikt.
Et element kan kun aria-owns-ejes af én forælder ad gangen. At eje det samme element fra to steder giver udefineret adfærd.
Ej ikke en forfader af dig selv. Det skaber en cyklus i AT-træet.
Elementet skal stadig være tilgængeligt i DOM — display: none er tilladt, men et fuldstændigt løsrevet element er ikke.

Hyppige fejl

Peger på et ID, der ikke eksisterer eller er fjernet i den seneste render.
Brug af aria-owns, når DOM blot kunne neste børnene korrekt. Tilføjer kompleksitet uden fordel.
To aria-owns-referencer til det samme barn fra forskellige forældre — AT vælger én vilkårligt.
Glemsel af, at fokusrækkefølge er uafhængig af aria-owns. Tastaturet taber stadig igennem den visuelle DOM-rækkefølge; AT-træet påvirker kun, hvordan skærmlæsere gennemgår tilgængelighedshierarkiet.
Brug af aria-owns til at løse et fokus- eller scroll-into-view-problem. Det gør ingen af delene.
Ejerskab over en region, der indeholder sin egen ejer — skaber en cyklus, ødelægger træet.

Eksempel

<!-- Combobox hvis popup er portalteret til body for stacking context -->
<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 lever i slutningen af body, semantisk ejet af comboboxen -->
<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>