aria-controls

Свойство связи из 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 пригодится для элемента, который состоит из нескольких независимых частей. Например, бургерное меню, которое раскрывается при нажатии на кнопку. В этом случае на странице есть отдельная кнопка и визуально скрытый контейнер, в котором находится список ссылок.

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