0Pricing
HTML Academy · Урок

aria-expanded и aria-controls для переключателей

Создавайте доступные виджеты раскрытия и аккордеоны с помощью ARIA

«aria-expanded и aria-controls для переключателей» — бесплатный урок HTML Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Обзор шаблона переключения

Элементам управления переключением (аккордеонам, раскрывающимся спискам, меню) нужен ARIA, чтобы сообщать об открытом или закрытом состоянии:

  • aria-expanded — указывает открытое или закрытое состояние элемента управления
  • aria-controls — связывает элемент управления с элементом, которым он управляет

aria-expanded

aria-expanded сообщает, развёрнут или свёрнут управляемый элемент:

<button aria-expanded="false" aria-controls="menu">
  Menu
</button>
<ul id="menu" hidden>
  <li><a href="/">Home</a></li>
</ul>
<script>
btn.addEventListener('click', () => {
  const expanded = btn.getAttribute('aria-expanded') === 'true';
  btn.setAttribute('aria-expanded', !expanded);
  menu.hidden = expanded;
});
</script>

aria-controls

aria-controls содержит id управляемого элемента:

<button
  id="details-btn"
  aria-expanded="false"
  aria-controls="details-panel"
>
  Show Details
</button>
<div id="details-panel" hidden>
  <p>Additional details go here...</p>
</div>
<!-- Screen reader: 'Show Details, button, collapsed'
     After click: 'Show Details, button, expanded' -->

Шаблон аккордеона

Доступный аккордеон с aria-expanded:

<div class="accordion">
  <h3>
    <button
      aria-expanded="false"
      aria-controls="panel-1"
    >Section 1</button>
  </h3>
  <div id="panel-1" hidden>
    <p>Panel 1 content...</p>
  </div>

  <h3>
    <button
      aria-expanded="false"
      aria-controls="panel-2"
    >Section 2</button>
  </h3>
  <div id="panel-2" hidden>
    <p>Panel 2 content...</p>
  </div>
</div>

Шаблон раскрывающегося меню

Доступное раскрывающееся меню навигации:

<nav>
  <button
    aria-expanded="false"
    aria-haspopup="true"
    aria-controls="products-menu"
  >Products</button>

  <ul id="products-menu" role="menu" hidden>
    <li role="menuitem"><a href="/widget">Widget</a></li>
    <li role="menuitem"><a href="/gadget">Gadget</a></li>
  </ul>
</nav>

aria-haspopup

aria-haspopup указывает, что активация элемента управления откроет всплывающее окно:

<button aria-haspopup="menu">File</button>
<!-- Values: true (menu), menu, listbox, tree, grid, dialog -->
<!-- Screen reader: 'File, button, has popup' -->

<!-- Note: aria-haspopup="true" is equivalent to "menu" -->
<!-- Use specific values when the popup type matters -->

Дополнение ARIA для details/summary

Встроенные details/summary уже сообщают о состоянии развёрнутости — ARIA не требуется:

<details>
  <summary>FAQ Question</summary>
  <p>Answer goes here.</p>
</details>
<!-- Browser automatically provides aria-expanded
     and the disclosure widget semantics -->
<!-- No need to add aria-expanded manually to summary -->

CSS для состояния aria-expanded

Используйте aria-expanded как селектор CSS:

/* Panel hidden by default: */
[aria-controls] + [hidden] {
  display: none;
}

/* Or using aria-expanded on the button: */
[aria-expanded="false"] + .panel {
  display: none;
}

[aria-expanded="true"] + .panel {
  display: block;
}

/* Rotate arrow icon: */
[aria-expanded="true"] .arrow {
  transform: rotate(180deg);
}

Требования к клавиатуре для переключателей

Компоненты переключения должны поддерживать взаимодействие с клавиатурой:

  • Enter или Space — активирует кнопку переключения
  • Escape — закрывает раскрывающийся список или меню
  • Arrow keys — перемещают по открытому меню

Управление focus после переключения

После переключения содержимого правильно управляйте focus:

// Accordion: focus stays on the button (usually OK)
// Dropdown menu: move focus to first menu item on open

button.addEventListener('click', () => {
  const expanded = button.getAttribute('aria-expanded') === 'true';
  button.setAttribute('aria-expanded', !expanded);
  panel.hidden = expanded;

  if (!expanded) {
    // Opening a dropdown: focus first item
    panel.querySelector('a, button, [tabindex]')?.focus();
  }
});

Особенности мобильных устройств

Компоненты переключения на мобильных устройствах:

  • Области касания должны быть размером не менее 44×44px (WCAG 2.5.5)
  • aria-expanded поддерживается мобильными программами чтения с экрана (iOS VoiceOver, Android TalkBack)
  • Жесты смахивания не заменяют активацию с клавиатуры или кнопки

Быстрая проверка

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

Итоги: aria-expanded и aria-controls

Основы ARIA для переключателей:

  • aria-expanded="true/false" — открытое или закрытое состояние элемента управления
  • aria-controls="id" — связывает элемент управления с его панелью
  • aria-haspopup — указывает на наличие всплывающего окна
  • Обновляйте aria-expanded при каждом переключении
  • Перемещайте focus в открытое меню; при закрытии возвращайте его к элементу, вызвавшему меню

Часто задаваемые вопросы

Урок «aria-expanded и aria-controls для переключателей» бесплатный?

Да — полный текст урока «aria-expanded и aria-controls для переключателей» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «aria-expanded и aria-controls для переключателей»?

Создавайте доступные виджеты раскрытия и аккордеоны с помощью ARIA Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «aria-expanded и aria-controls для переключателей»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. aria-expanded и aria-controls для переключателей
  2. aria-selected и шаблоны вкладок
  3. Живые области: aria-live aria-atomic aria-relevant
  4. Тестирование с экранными дикторами
← Назад к HTML Academy