Клавиша / esc

aria-expanded

Как рассказать скринридерам, что элемент что-то разворачивает и сворачивает.

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

Кратко

Скопировано

Состояние виджета из WAI-ARIA. Сообщает вспомогательным технологиям, что элемент разворачивает и сворачивает другое содержимое.

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

Пример

Скопировано
        
          
          <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>

        
        
          
        
      
Открыть демо в новой вкладке

Скринридер при фокусе на кнопке расскажет о ней примерно так: «Список товаров, кнопка, свёрнуто». Когда пользователь раскроет список, скринридер просто сообщит «развёрнуто» без повторения информации о кнопке.

Как пишется

Скопировано

Добавьте к элементу атрибут aria-expanded с одним из трёх значений:

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

aria-expanded используют для интерактивных элементов, с которыми могут взаимодействовать пользователи. Так что атрибут подходит только для некоторых HTML-тегов и ARIA-ролей:

Атрибут повысит доступность бургер-меню, кастомных аккордеонов, выпадающих или древовидных списков, а ещё сеток — интерактивных таблиц как в Exel.

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

Чтобы скринридеры правильно рассказали о том, свёрнут или развёрнут элемент, задействуйте магию JavaScript 🪄 Например, слушайте событие click на элементе и, если содержимое развёрнуто, задавайте кнопке aria-expanded="true", если свёрнуто — aria-expanded="false". Значения можно переключать методом .setAttribute().