aria-expanded 是手动控制的 ARIA 属性，用于明确告知屏幕阅读器内容区域的展开/折叠状态，必须与 DOM 实际可见性同步更新，否则会导致辅助技术误读状态。
aria-expanded 是什么，为什么必须手动控制
aria-expanded 不是自动同步的属性，它不会因为元素 display 或 hidden 变化而自行更新。浏览器不读取 CSS 或 DOM 可见性来推断这个值——它只相信你写的 aria-expanded="true" 或 aria-expanded="false"。手风琴展开/收起时若漏掉这一步，屏幕阅读器会读错状态，用户无法判断当前是否可交互。
常见错误现象：
- 点击标题后内容显示了，但屏幕阅读器仍说“已折叠”
- 键盘用户按空格/回车触发切换，但 aria-expanded 没变，导致后续操作逻辑错乱
怎么给手风琴标题加 aria-expanded 和对应行为
每个手风琴项的触发元素（通常是 <button> 或带 role="button" 的 <div>）必须同时满足：
- 有
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 描述该区域当前状态。两者缺一不可，否则语义断裂：
- 只有
aria-expanded没有aria-controls：屏幕阅读器不知道“展开/折叠”的对象是谁 - 只有
aria-controls没有aria-expanded：屏幕阅读器无法告知用户当前状态，键盘用户失去上下文 - ID 不匹配（比如拼写错误或动态生成未对齐）：
aria-controls失效，相当于没写
检查方法：在浏览器 DevTools 中右键点击按钮 → “Inspect”，确认 aria-controls="xxx" 的值与目标 <div id="xxx"> 完全一致（包括大小写和特殊字符）。
用 hidden 还是 display: none？影响 aria-expanded 吗
不影响。无论用 hidden 属性、display: none、visibility: hidden 或 max-height: 0 控制内容显隐，aria-expanded 都必须由 JS 手动设置。但推荐优先用 hidden 属性，原因：
- 语义清晰：原生支持无障碍，隐藏内容默认不被屏幕阅读器读取
- 无需额外 CSS 重置（比如
display: none需配合!important才能被 JS 切换覆盖） - 与
aria-expanded逻辑耦合更直接：togglehidden↔ togglearia-expanded
注意：如果用了 max-height 动画，hidden 会立刻隐藏，动画失效。此时需用 aria-hidden="true" + class 切换，并确保动画结束后再更新 aria-expanded 和 aria-hidden。
手风琴的无障碍核心不在视觉动效，而在每次状态变更时，aria-expanded 是否与真实 DOM 状态严格一致——哪怕只差一次赋值，对依赖它的辅助技术就是完全不同的体验。
