Свойство Връзка

`aria-owns`

Декларира връзка родител-дете в дървото за достъпност, когато DOM структурата не я изразява. Прехвърля референтните елементи като деца на текущия елемент за целите на помощните технологии. Мощен инструмент — лесен за злоупотреба.

Кога се използва

Само когато DOM не може да постави децата там, където дървото за достъпност се нуждае от тях. Най-честият случай е изскачащ listbox за combobox: списъкът живее в края на <body> поради причини, свързани с z-index, но семантично принадлежи на combobox-а. aria-owns на combobox-а, сочещ към идентификатора на listbox-а, казва на помощните технологии да третират listbox-а като негово дете.

Ако DOM може да се преструктурира така, че детето да е реален потомък, това е предпочитаният подход. aria-owns е вратичката за изход — работи, но заобикаля естествената проверка на разработчика, че маркирането отговаря на семантиката.

Как се държи

Стойността е разделен с интервали списък от идентификатори на елементи. Дървото за достъпност се преизгражда така, че всеки референтен елемент се появява като дете на притежаващия елемент, в реда, в който са изброени. Оригиналният DOM родител губи тези деца в изгледа на помощните технологии.

Правила за запазване на валидността на дървото:

Всеки референтен идентификатор трябва да съществува и да е уникален.
Един елемент може да бъде притежаван чрез aria-owns само от един родител едновременно. Притежаването на един и същ елемент от две места произвежда непредсказуемо поведение.
Не бива да се притежава предшественик на самия елемент. Това създава цикъл в дървото на помощните технологии.
Елементът трябва да остава достъпен в DOM — display: none е допустим, но напълно откачен елемент — не.

Чести грешки

Препращане към идентификатор, който не съществува или е премахнат при последното рендиране.
Използване на aria-owns, когато DOM може просто да вложи децата правилно. Добавя сложност без полза.
Два референции на aria-owns за едно и също дете от различни родители — помощната технология избира произволно.
Забравяне, че редът на фокуса е независим от aria-owns. Клавиатурата продължава да обхожда с Tab визуалния ред в DOM; дървото на помощните технологии засяга само начина, по който екранните четци обхождат йерархията за достъпност.
Прибягване до aria-owns за решаване на проблем с фокуса или превъртането до видим елемент. Атрибутът не прави нито едното.
Притежаване на регион, съдържащ собствения му притежател — създава цикъл и руши дървото.

Пример

<!-- Combobox, чийто popup е портален до body заради контекста на наслагване -->
<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 живее в края на body, притежаван семантично от 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>