Кратко
СкопированоСвойство связи из WAI-ARIA. Указывает на то, что один или несколько элементов управляют другими.
Пример
Скопировано<nav> <button aria-label="Список товаров" aria-expanded="false" aria-controls="subnav" > <!-- Иконка --> </button> <div id="subnav"> <ul> <li> <a href="/dogs-pools/"> Бассейны для собак </a> </li> <li> <a href="/cats-boxes/"> Коробки для кошек </a> </li> <li> <a href="/rats-water-bowls/"> Поилки для крыс </a> </li> </ul> </div></nav>
<nav> <button aria-label="Список товаров" aria-expanded="false" aria-controls="subnav" > <!-- Иконка --> </button> <div id="subnav"> <ul> <li> <a href="/dogs-pools/"> Бассейны для собак </a> </li> <li> <a href="/cats-boxes/"> Коробки для кошек </a> </li> <li> <a href="/rats-water-bowls/"> Поилки для крыс </a> </li> </ul> </div> </nav>
JAWS при фокусе на кнопке расскажет о ней примерно так: «Список товаров, кнопка. Нажмите кнопку JAWS Alt M, чтобы перейти к управляемому элементу».
Как пишется
СкопированоЗадайте тегу атрибут aria
со значением в виде ID и свяжите с ним другой элемент через атрибут id
с таким же значением. aria
можно задавать всем тегам и элементам с ARIA-ролями.
К примеру, здесь кнопка <button>
раскрывает список ссылок внутри <div>
. В этом случае кнопка — управляющий элемент, а контейнер <div>
с его содержимым — управляемый. Чтобы рассказать об этих отношениях между двумя элементами, зададим кнопке aria
со значением menu
, а раскрывающемуся списку ссылок — id
с точно таким же значением menu
.
<button type="button" aria-expanded="false" aria-controls="menu"> Показать меню</button><div id="menu"> <ul> <!-- Список ссылок --> </ul></div>
<button type="button" aria-expanded="false" aria-controls="menu" > Показать меню </button> <div id="menu"> <ul> <!-- Список ссылок --> </ul> </div>
С одним элементом может быть связано несколько других, поэтому в aria
может быть больше одного ID. В этом случае их перечисляют через пробел.
<button type="button" aria-controls="red green blue"> Случайный цвет</button><div id="red"></div><div id="green"></div><div id="blue"></div>
<button type="button" aria-controls="red green blue" > Случайный цвет </button> <div id="red"> </div> <div id="green"> </div> <div id="blue"> </div>
aria
пригодится для элементов, которые состоят из нескольких независимых частей. Вот несколько распространённых ситуаций:
- панели вкладок для связи отдельной вкладки с её содержимым;
- кнопки в меню, которые раскрывают выпадающие списки ссылок;
- кастомные комбинированные списки;
- группы чекбоксов, при выборе которых изменяется содержимое другой части страницы, к примеру, цена на товар;
- группы чекбоксов, которые работают как фильтры и изменяют другую часть страницы в зависимости от выбора пользователя.
На практике aria
пока никак не улучшает опыт пользователей вспомогательных технологий, поэтому пока в большинстве случаев атрибут использовать не обязательно. Исключение — кастомный комбинированный список с ролью combobox
. Элемент с этой ролью обязательно связывают с раскрывающимся списком с опциями на выбор.
Подсказки
Скопировано💡 aria
тоже устанавливает связь между элементами, но как между родительским и дочерним.
💡 Другой атрибут связи aria
обозначает текущий элемент внутри сложного интерактивного компонента. Например, выбранный пункт в выпадающем списке.