Кратко
СкопированоСвойство связи из 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
с одним или несколькими ID через пробел и свяжите с ним один или несколько дочерних элементов через id
. Атрибут можно использовать для всех тегов и ролей.
Располагайте ID в атрибуте в том же порядке, в каком элементы находятся визуально. Помните, что значения ID должны быть уникальными для каждого элемента, а один и тот же дочерний элемент не может быть связан с несколькими родительскими.
Не используйте aria
, когда связь между элементами уже есть на уровне разметки. Ещё не изменяйте так существующую иерархию элементов.
Как понять
СкопированоИногда внешний вид страницы отличается от того, как всё устроено в разметке. Например, как у всплывающего подменю в сложной навигации. Визуально один блок со списком ссылок находится рядом с другим, но в разметке они не вложены в один родительский элемент из-за сложностей с CSS.