aria-expanded

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

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

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

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

Как понять

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

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