HTML Academy · 课时

用于切换控件的 aria-expanded 和 aria-controls

Q: 「用于切换控件的 aria-expanded 和 aria-controls」这节课中我会学到什么？

使用 ARIA 构建无障碍披露组件和手风琴组件 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 ARIA 构建无障碍披露组件和手风琴组件

用于切换控件的 aria-expanded 和 aria-controls 是 CoddyKit 上的免费 HTML Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 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 -->

Details/Summary 的 ARIA 补充说明

原生 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 -->

aria-expanded 状态的 CSS

将 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);
}

切换控件的键盘要求

切换组件必须支持键盘交互：

回车或空格——激活切换按钮
退出——关闭下拉菜单或菜单
箭头键——在打开的菜单中导航

切换后管理焦点

切换内容后，应适当地管理焦点：

// 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
将焦点移入打开的菜单；关闭时将焦点移回触发控件

常见问题解答

「用于切换控件的 aria-expanded 和 aria-controls」课时是免费的吗？

是的 — 「用于切换控件的 aria-expanded 和 aria-controls」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「用于切换控件的 aria-expanded 和 aria-controls」这节课中我会学到什么？

使用 ARIA 构建无障碍披露组件和手风琴组件你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「用于切换控件的 aria-expanded 和 aria-controls」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

用于切换控件的 aria-expanded 和 aria-controls
aria-selected 与标签页模式
实时区域：aria-live、aria-atomic、aria-relevant
使用屏幕阅读器进行测试

← 返回 HTML Academy