aria-expanded必须绑定在触发展开/收起的交互元素（如）上，而非内容容器；需用javascript显式设置字符串值"true"/"false"，并与hidden属性或视觉状态严格同步。
aria-expanded 应该绑定在哪个元素上
必须绑定在触发折叠/展开行为的交互元素上，通常是 <button></button> 或带 role="button" 的元素，而不是折叠内容容器本身。如果绑错位置（比如写在 <div class="submenu"> 上），屏幕阅读器无法关联操作与状态变化，AT（辅助技术）会完全忽略这个属性。
<ul>
<li>正确：<code><button aria-expanded="false">产品</button><ul class="submenu">...</ul>
<button>产品</button><ul class="submenu" aria-expanded="false">...</ul>
<a></a> 标签模拟按钮，需加 role="button" 才能被识别为可交互控件，否则 aria-expanded 无效JavaScript 中如何同步更新 aria-expanded
不能只靠 CSS 类切换来“假装”状态改变；aria-expanded 必须由 JS 显式设置为字符串 "true" 或 "false"（注意是字符串，不是布尔值）。常见错误是直接赋布尔值：btn.setAttribute('aria-expanded', isOpen) —— 这会导致属性值变成 true 或 false（无引号），而规范要求必须是字符串。
- 正确写法：
btn.setAttribute('aria-expanded', isOpen ? 'true' : 'false') - 推荐用
btn.toggleAttribute('aria-expanded', isOpen)（现代浏览器支持，自动处理增删） - 别忘了同时控制折叠内容的
hidden属性或aria-hidden，否则视觉隐藏但语义未隔离，AT 仍会读出内容
aria-expanded 和 display: none / visibility: hidden 冲突吗
不冲突，但语义和行为要对齐。CSS 隐藏（如 display: none）不影响 aria-expanded 的取值逻辑，但若内容已用 display: none 隐藏，又把 aria-expanded 设为 "true"，就会造成状态矛盾：AT 认为“已展开”，实际不可见、不可聚焦。
- 最佳实践：状态变更时，JS 同步更新
aria-expanded和 DOM 可见性（如切换hidden属性或 CSS class） - 避免仅靠
visibility: hidden或opacity: 0隐藏折叠内容——这些方式会让内容仍在可访问树中，AT 仍会尝试读取 - 用
hidden属性或aria-hidden="true"+display: none组合，确保视觉与语义一致
为什么 Safari + VoiceOver 下 aria-expanded 切换有时不朗读
这是已知兼容性问题：Safari 对 aria-expanded 动态变更的响应延迟或静默，尤其在快速连续点击时。根本原因不是代码写错，而是 WebKit 对 ARIA 属性变更的通告机制不够及时。
- 缓解方案：在
setAttribute后加btn.focus()（确保焦点回到按钮），VoiceOver 更可能触发状态播报 - 不要依赖
setTimeout延迟更新——这反而破坏同步性，且无法保证修复 - 测试时务必手动点击，而非用 JS 模拟
click()，后者常绕过 AT 的事件监听路径
aria-expanded 与 hidden 的联动，以及按钮缺少 role="button" 导致属性被忽略——这两个点一错，整个折叠菜单对屏幕阅读器就形同虚设。
