aria-owns

ARIA-атрибут, который связывает родительский элемент с дочерними.

Время чтения: меньше 5 мин

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Секция статьи "Кратко"

Свойство связи из 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.