Състояние Състояние на контрола

`aria-expanded`

Указва дали сгъваем елемент — бутон за разкриване, комбинирано поле, меню, елемент от дърво — е отворен в момента. Приема "true" или "false". Обикновено се съчетава с aria-controls, сочещ към областта, която контролът отваря.

Кога да се използва

Върху всеки контрол, който отваря и затваря друга област на потребителския интерфейс: заглавие на акордеон, бутон за разкриване „покажи повече”, задействащ елемент на комбинирано поле, бутон за меню, treeitem с дъщерни елементи, превключвател за навигация тип „хамбургер”. Контролът остава същия елемент при двете състояния — само атрибутът се превключва.

Ако контролът превключва състояние на самия елемент (заглушаване / отмяна на заглушаването, следване / спиране на следването), използвайте вместо това aria-pressed. aria-expanded описва връзка с друга област, обикновено идентифицирана чрез aria-controls.

Ролята определя дали aria-expanded е смислен: той се поддържа за button, combobox, link, tab, treeitem, menuitem, gridcell, row и няколко други. Поставянето му върху <div> без роля не дава полезен резултат.

Как да се поддържа синхронизиран

Допустимите стойности са "true" (областта е отворена) и "false" (областта е затворена). Подразбиращата се стойност при пропускане е „изобщо няма разгънато състояние” — което е различно от "false". Ако контролът може да се разгъва, рендирайте aria-expanded="false" в затвореното му състояние, вместо да го оставяте без атрибута.

Обновявайте атрибута в същия код, който анимира отварянето или затварянето на областта. Атрибутът е основният източник на истина, от който екранните четци четат; визуалният шеврон е вторичен знак за зрящите потребители.

Съчетайте с aria-controls="<region-id>", за да може екранният четец да обяви връзката: „Filters, button, collapsed, controls filter-panel”. Някои помощни технологии предлагат пряк път за прескачане към контролираната област.

Чести грешки

Превключване на CSS клас на панела, без да се обръща aria-expanded.
Използване на aria-expanded върху неинтерактивен елемент без роля. Атрибутът се игнорира.
Добавяне само на aria-expanded="true" — никога не се рендира състоянието "false". Екранните четци не обявяват нищо в затвореното състояние.
Използване на aria-expanded върху контрол, който не разгъва реална област (например бутон „Изпрати”).
Объркване на aria-expanded с aria-pressed при превключващи бутони, които не отварят отделна област.
Пропускане на aria-controls, оставяйки имплицитна връзката между задействащия елемент и панела.

Пример

<button
  type="button"
  aria-expanded="false"
  aria-controls="filters-panel"
  onclick="toggle(this)"
>
  Filters
</button>

<div id="filters-panel" hidden>
  <!-- filter controls -->
</div>