aria-controls

Свойство связи из 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-controls со значением в виде ID и свяжите с ним другой элемент через атрибут id с таким же значением. aria-controls можно задавать всем тегам и элементам с ARIA-ролями.

К примеру, здесь кнопка <button> раскрывает список ссылок внутри <div>. В этом случае кнопка — управляющий элемент, а контейнер <div> с его содержимым — управляемый. Чтобы рассказать об этих отношениях между двумя элементами, зададим кнопке aria-controls со значением 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-controls может быть больше одного 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-controls пригодится для элементов, которые состоят из нескольких независимых частей. Вот несколько распространённых ситуаций:

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

На практике aria-controls пока никак не улучшает опыт пользователей вспомогательных технологий, поэтому пока в большинстве случаев атрибут использовать не обязательно. Исключение — кастомный комбинированный список с ролью combobox. Элемент с этой ролью обязательно связывают с раскрывающимся списком с опциями на выбор.

💡 aria-owns тоже устанавливает связь между элементами, но как между родительским и дочерним.

💡 Другой атрибут связи aria-arctivedescendant обозначает текущий элемент внутри сложного интерактивного компонента. Например, выбранный пункт в выпадающем списке.