原生<details>标签无需手动设置aria-expanded，浏览器已内置角色、键盘操作及状态播报；手动添加会导致状态不同步、干扰屏幕阅读器。
原生 <details> 标签无需手动设置 aria-expanded，浏览器已内置完整无障碍支持；强行添加反而可能干扰屏幕阅读器播报。
为什么不能给 <details> 加 aria-expanded
浏览器对 <details> 的原生实现已自动处理角色（role="group"）、键盘响应（Enter/Space 切换）和状态播报（如“帮助信息，已折叠”）。手动加 aria-expanded 属于冗余声明，部分读屏器会忽略或覆盖该属性，导致状态不同步——比如 DOM 中 open 为 true，但 aria-expanded="false" 被保留，读屏器就可能误报“已折叠”。
<details> 的正确用法与常见错误
确保语义完整、不破坏原生行为是关键：
- 必须包含
<summary>子元素，且内容可读（不能空或仅含图标）；若只有图标，需加aria-label，例如<summary aria-label="展开常见问题"><svg></svg></summary> - 避免在
<summary>上绑定click事件——会干扰原生切换逻辑，改用toggle事件监听：details.addEventListener('toggle', () => { ... }) - 不要用 CSS 隐藏
<summary>或设display: none，否则读屏器无法定位可操作点 - 多个
<details>同时存在时，若需单开模式（手风琴），应在toggle回调中显式关闭其他项，但注意跳过自身：if (d !== details) d.removeAttribute('open')
什么情况下才需要干预 aria-expanded
仅当不使用原生 <details>，而用 <div> + JS 模拟折叠面板时，才需手动管理 aria-expanded：
立即学习“前端免费学习笔记（深入）”；
- 必须加在触发元素上（如自定义按钮），而非容器
- 值必须严格同步 DOM 状态：展开时设
aria-expanded="true"，收起时设aria-expanded="false" - 同时要保证该元素有
tabindex="0"、响应Enter/Space键，并提供视觉焦点样式 - 若用 Shadow DOM 封装，
aria-expanded应设在 shadow root 内的触发节点上，不可跨域引用
最易被忽略的一点：很多人以为“加了 ARIA 就更安全”，但在 <details> 这种原生组件上，删掉所有手动 ARIA 才是最稳妥的做法——它的无障碍能力来自浏览器实现，不是开发者补丁。
