aria-controls

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

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

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

Кратко

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

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

Пример

Секция статьи "Пример"
        
          
          <button aria-expanded="false" aria-controls="menu">Меню</button><div class="menu" id="menu">  <ul>    <li>      <a href="/dogs-pools/">Бассейны для собак</a>    </li>    <li>      <a href="/cats-boxes/">Коробки для кошек</a>    </li>  </ul></div>
          <button aria-expanded="false" aria-controls="menu">Меню</button>
<div class="menu" id="menu">
  <ul>
    <li>
      <a href="/dogs-pools/">Бассейны для собак</a>
    </li>
    <li>
      <a href="/cats-boxes/">Коробки для кошек</a>
    </li>
  </ul>
</div>

        
        
          
        
      

Как пишется

Секция статьи "Как пишется"

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

Как понять

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

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

Также атрибут часто используют для вкладок, аккордеонов и чекбоксов, при выборе которых изменяется содержимое страницы, как в тарифных планах.