aria-expanded 是手动控制的 aria 属性，用于明确告知屏幕阅读器内容区域的展开/折叠状态，必须与 dom 实际可见性同步更新，否则会导致辅助技术误读状态。

aria-expanded 是什么，为什么必须手动控制

aria-expanded 不是自动同步的属性，它不会因为元素 display 或 hidden 变化而自行更新。浏览器不读取 CSS 或 DOM 可见性来推断这个值——它只相信你写的 aria-expanded="true" 或 aria-expanded="false"。手风琴展开/收起时若漏掉这一步，屏幕阅读器会读错状态，用户无法判断当前是否可交互。

常见错误现象：
- 点击标题后内容显示了，但屏幕阅读器仍说“已折叠”
- 键盘用户按空格/回车触发切换，但 aria-expanded 没变，导致后续操作逻辑错乱

怎么给手风琴标题加 aria-expanded 和对应行为

每个手风琴项的触发元素（通常是 <button></button> 或带 role="button" 的 <div>）必须同时满足：<ul> <li>有 <code>aria-expanded 属性，初始值根据默认状态设为 "true" 或 "false"

绑定点击/键盘事件（Enter 和 Space 都要处理）

事件中显式切换 aria-expanded 值，并同步控制关联内容区的可见性

示例片段：

<button aria-expanded="false" aria-controls="panel-1">常见问题</button>
<div id="panel-1" hidden>…</div>

JS 中不能只写 el.hidden = !el.hidden，必须同步改属性：

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

aria-controls 和 aria-expanded 必须配对使用

aria-controls 指向被控制的内容区域 ID，aria-expanded 描述该区域当前状态。两者缺一不可，否则语义断裂：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

• 只有 aria-expanded 没有 aria-controls：屏幕阅读器不知道“展开/折叠”的对象是谁
• 只有 aria-controls 没有 aria-expanded：屏幕阅读器无法告知用户当前状态，键盘用户失去上下文
• ID 不匹配（比如拼写错误或动态生成未对齐）：aria-controls 失效，相当于没写

检查方法：在浏览器 DevTools 中右键点击按钮 → “Inspect”，确认 aria-controls="xxx" 的值与目标 <div id="xxx"> 完全一致（包括大小写和特殊字符）。<h3>用 hidden 还是 display: none？影响 aria-expanded 吗</h3> <p>不影响。无论用 <code>hidden 属性、display: none、visibility: hidden 或 max-height: 0 控制内容显隐，aria-expanded 都必须由 JS 手动设置。但推荐优先用 hidden 属性，原因：

• 语义清晰：原生支持无障碍，隐藏内容默认不被屏幕阅读器读取
• 无需额外 CSS 重置（比如 display: none 需配合 !important 才能被 JS 切换覆盖）
• 与 aria-expanded 逻辑耦合更直接：toggle hidden ↔ toggle aria-expanded

注意：如果用了 max-height 动画，hidden 会立刻隐藏，动画失效。此时需用 aria-hidden="true" + class 切换，并确保动画结束后再更新 aria-expanded 和 aria-hidden。

手风琴的无障碍核心不在视觉动效，而在每次状态变更时，aria-expanded 是否与真实 DOM 状态严格一致——哪怕只差一次赋值，对依赖它的辅助技术就是完全不同的体验。