Właściwość Relacja

`aria-owns`

Deklaruje relację rodzic-dziecko w drzewie dostępności, gdy struktura DOM jej nie wyraża. Przenoszone węzły stają się dziećmi elementu właściciela w widoku technologii wspomagających. Potężne narzędzie — łatwe w nadużyciu.

Kiedy używać

Tylko gdy DOM nie może umieścić dzieci tam, gdzie potrzebuje ich drzewo dostępności. Najczęstszy przypadek to wyskakujący listbox dla comboboxa: lista znajduje się na końcu <body> ze względu na z-index, ale semantycznie należy do comboboxa. aria-owns na comboboxie wskazujące ID listboxa nakazuje technologiom wspomagającym traktować listbox jako dziecko.

Jeśli możesz zrestrukturyzować DOM tak, aby dziecko było prawdziwym potomkiem, zrób to najpierw. aria-owns to wyjście awaryjne — działa, ale omija naturalne zabezpieczenie: że markup odpowiada semantyce.

Jak działa

Wartością jest lista ID elementów oddzielona spacjami. Drzewo dostępności jest przebudowywane tak, że każdy wskazany element pojawia się jako dziecko elementu właściciela, w podanej kolejności. Oryginalny rodzic DOM traci te dzieci w widoku AT.

Zasady zachowania poprawności drzewa:

Każde wskazane ID musi istnieć i być unikalne.
Element może być aria-owns-owany tylko przez jednego rodzica naraz. Wskazanie tego samego elementu z dwóch miejsc daje niezdefiniowane zachowanie.
Nie wolno posiadać własnego przodka — to tworzy cykl w drzewie AT.
Element musi być nadal osiągalny w DOM — display: none jest dozwolone, w pełni odłączony element nie.

Częste błędy

Wskazanie ID, które nie istnieje lub zostało usunięte w ostatnim renderowaniu.
Używanie aria-owns, gdy DOM mógłby po prostu zagnieździć dzieci prawidłowo. Dodaje złożoność bez korzyści.
Dwa odniesienia aria-owns do tego samego dziecka z różnych rodziców — AT wybiera jedno arbitralnie.
Zapominanie, że kolejność fokusa nie jest powiązana z aria-owns. Klawiatura tabuluje przez wizualny porządek DOM; drzewo AT wpływa tylko na sposób, w jaki czytniki ekranu przemierzają hierarchię dostępności.
Sięganie po aria-owns do rozwiązania problemu fokusa lub przewijania widoku. Nie robi ani jednego.
Posiadanie regionu zawierającego własnego właściciela — tworzy cykl, niszczy drzewo.

Przykład

<!-- Combobox, którego wyskakujące okno jest portlowane do body dla kontekstu układania warstw -->
<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 znajduje się na końcu body, semantycznie należy do comboboxa -->
<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>