aria-expanded 是 aria 规范中表示可展开/折叠控件当前状态的必需布尔属性，必须显式设置为 true 或 false 并与 dom 实际可见性严格同步，配合 aria-controls、aria-hidden、role="button" 等才能构成无障碍手风琴。
aria-expanded 是什么，什么时候必须设
aria-expanded 是 ARIA 规范中用于表示可展开/折叠控件当前状态的布尔属性。它不是装饰性标记，而是屏幕阅读器依赖的关键语义信号——当用户用键盘或读屏软件操作手风琴时，aria-expanded="true" 告诉辅助技术“这个区域已展开”，反之则提示“已收起”。不设或设错会导致读屏用户完全无法感知内容是否可见。
怎么同步更新 aria-expanded 和实际 DOM 状态
常见错误是只改了视觉（比如 display: none 或 class 切换），却忘了同步 aria-expanded。必须保证它与真实展开状态严格一致：
- 点击触发展开时，先设置
aria-expanded="true"，再显示内容（或加动画） - 折叠时，先设
aria-expanded="false"，再隐藏内容 - 如果用 CSS 过渡动画，建议在
transitionend后再改aria-expanded（但更稳妥的做法是立刻改属性，让读屏器第一时间响应） - 初始状态也要显式声明：不能靠默认值，必须写
aria-expanded="false"或aria-expanded="true"
配合哪些其他 ARIA 属性才完整
单靠 aria-expanded 不足以构成合规的手风琴。至少还需：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
aria-controls指向被控制的内容容器 ID，例如：aria-controls="panel-1" - 被控内容容器需有
id="panel-1"且设aria-hidden="true"（折叠时）或aria-hidden="false"（展开时）——注意：这和aria-expanded是两个独立信号，不能互相替代 - 按钮本身应有
role="button"（尤其当它不是原生<button></button>时） - 整个手风琴组建议用
role="region"包裹，并配aria-labelledby指向标题
容易被忽略的交互细节
很多手风琴在键盘操作上失效，根源常在于 ARIA 状态没跟上焦点和按键逻辑：
- 按
Space或Enter触发切换时，必须同步更新aria-expanded—— 不能只监听 click - 若支持多选展开（非互斥），确保每个项的
aria-expanded独立控制；若为单选模式，展开新项前要主动将其他项设为aria-expanded="false" - 动态渲染的手风琴（如 React/Vue 渲染后），务必在 DOM 插入后立即初始化
aria-expanded，避免 SSR 和 CSR 状态不一致 - 不要用
aria-expanded控制样式（比如[aria-expanded="true"] .content { display: block; }），它只是语义层，样式应由 class 或 JS 状态驱动
最麻烦的不是写对那一行 aria-expanded，而是它得和 JS 状态、CSS 可见性、键盘事件、焦点管理全部咬合——漏掉任意一环，对读屏用户就是信息断层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
