原生和标签的aria属性由浏览器自动管理，无需手动添加aria-expanded等属性；仅在用+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 实际状态严格一致。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

• 手动加 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 属性越多，越可能覆盖掉浏览器自动注入的正确状态**。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！