原生<details>和<summary>标签的ARIA属性由浏览器自动管理，无需手动添加aria-expanded等属性；仅在用<div>+JS模拟折叠时才需手动维护并严格同步状态。
details 和 summary 的 ARIA 属性是浏览器自动管理的，不是你写的
原生 details 标签根本不需要你手动加 aria-expanded、aria-controls 或其他 ARIA 属性——浏览器内部已按规范注入并同步状态。写上去不仅多余，还可能干扰读屏器判断。
-
details自动获得role="group"，summary自动获得role="button" - 点击或按空格/回车时，浏览器自动切换
open属性，并同步更新aria-expanded值（true或false） - 屏幕阅读器直接播报“帮助文档，已折叠”或“帮助文档，已展开”，不依赖你写的任何属性
- 若你在
summary上额外加tabindex="0"，反而会破坏原生焦点逻辑，导致双焦点或键盘操作失效
什么情况下必须手动加 aria-expanded？
只有一种情况：你没用原生 details，而是用 div + JS 模拟折叠行为，且视觉上刻意模仿 details 外观。这时才需要自己维护 aria-expanded，并确保它与 DOM 实际状态严格一致。
- 手动加
aria-expanded必须配对 JS 状态控制：比如element.setAttribute('aria-expanded', 'true')后，必须同步设置内容可见性（如element.classList.remove('hidden')） - 不能只加属性不改状态，也不能只改状态不更新属性——否则读屏器会播报错误状态
- 若用原生
details却硬加aria-expanded，部分读屏器（如旧版 NVDA）可能忽略open属性，只认你写的值，造成状态错乱
summary 里嵌标题（如 h3）会影响 ARIA 吗？
不影响语义映射，但会影响可访问性体验——因为嵌套标题会改变焦点流和读屏器播报结构。
-
summary内允许放h3、span等内联或块级元素，浏览器仍保持role="button" - 但读屏器会先读标题层级（如“三级标题，降噪模式”），再读状态（“已折叠”），顺序合理；若在
summary里塞button或另一个summary，就会触发嵌套角色冲突，被校验工具报错 - 真正的问题是样式：
h3默认display: block，会导致原生三角图标换行或错位；应改用display: inline-flex或重置summary::marker来保持布局稳定
检查 ARIA 是否生效的最简方法
别靠肉眼查代码，直接用系统自带工具验证真实行为。
立即学习“前端免费学习笔记（深入）”；
- 在 Chrome 中右键 → “检查” → 切到“Accessibility”面板，选中
summary元素，看右侧是否显示role="button"和动态更新的aria-expanded - 用 VoiceOver（macOS）或 NVDA（Windows）实际朗读：聚焦
summary后，听是否明确播报“已展开”或“已折叠” - 禁用 JavaScript 后刷新页面，确认折叠功能是否仍可用——如果不可用，说明你误用了非原生方案，ARIA 很可能没正确绑定
details 的无障碍能力藏在浏览器实现里，不是靠标签名或属性堆砌出来的。最容易被忽略的点是：**你写的 ARIA 属性越多，越可能覆盖掉浏览器自动注入的正确状态**。 
