aria-expanded

Состояние виджета из 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-expanded с одним из трёх значений:

• true — содержимое или другие элементы развёрнуты.
• false — содержимое или другие элементы свёрнуты.
• undefined (по умолчанию) — у элемента нет содержимого, которое разворачивается и сворачивается.

Атрибут можно использовать только для некоторых тегов и ARIA-ролей:

• <a> или link.
• <button> или button.
• <input type="checkbox"> или checkbox.
• <select> или combobox, listbox.
• <tr> или row.
• <th> или rowheader.
• application.
• tab.
• menuitem.
• treeitem.
• gridcell.

Используйте aria-expanded вместе с aria-controls или aria-owns, когда контейнер с разворачивающимся содержимым не вложен в главный элемент.

Атрибут aria-expanded нужен для элементов, при взаимодействии с которыми содержимое изменяет видимость. Например для кнопки, которая показывает или скрывает меню.