aria-owns

Свойство связи из WAI-ARIA. Указывает на то, что один элемент или несколько связаны с другими как родители или дети визуально, функционально или в контексте, но это не отражено в DOM.

        
          
          <input  type="text"  role="combobox"  aria-label="Любимое животное"  aria-expanded="true"  aria-autocomplete="list"  aria-owns="owned_listbox"  aria-activedescendant="selected_option"><ul role="listbox" id="owned_listbox">  <li role="option">Опоссумы</li>  <li role="option" id="selected_option">Капибары</li></ul>
          <input
  type="text"
  role="combobox"
  aria-label="Любимое животное"
  aria-expanded="true"
  aria-autocomplete="list"
  aria-owns="owned_listbox"
  aria-activedescendant="selected_option"
>
<ul role="listbox" id="owned_listbox">
  <li role="option">Опоссумы</li>
  <li role="option" id="selected_option">Капибары</li>
</ul>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Задайте тегу атрибут aria-owns с одним или несколькими ID через пробел и свяжите с ним один или несколько дочерних элементов через id. Атрибут можно использовать для всех тегов и ролей.

Располагайте ID в атрибуте в том же порядке, в каком элементы находятся визуально. Помните, что значения ID должны быть уникальными для каждого элемента, а один и тот же дочерний элемент не может быть связан с несколькими родительскими.

Не используйте aria-owns, когда связь между элементами уже есть на уровне разметки. Ещё не изменяйте так существующую иерархию элементов.

Иногда внешний вид страницы отличается от того, как всё устроено в разметке. Например, как у всплывающего подменю в сложной навигации. Визуально один блок со списком ссылок находится рядом с другим, но в разметке они не вложены в один родительский элемент из-за сложностей с CSS.