aria-expanded

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

• ссылок <a> или роли link;
• кнопок <button> или роли button;
• чекбоксов <input type="checkbox"> или роли checkbox;
• выпадающих списков <select> или ролей combobox, listbox;
• интерактивных строк таблиц <tr> или row;
• интерактивных заголовков ячеек или строк таблиц <th> или rowheader;
• приложений application;
• вкладок tab;
• пунктов меню как в программе menuitem;
• пунктов древовидных списков treeitem;
• ячеек сеток gridcell.

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

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

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