在Web开发社区中，关于原生HTML <details> 与 <summary> 元素的可访问性讨论从未停止。近日，一场围绕“纯CSS风格下，该展开部件是否需要额外添加 aria-expanded 属性”的技术辩论再度升温，引发前端开发者与无障碍倡导者的广泛关注。
原生语义：天生的折叠控件
<details> 与 <summary> 是HTML5规范的官方折叠交互组件。浏览器默认将其映射为“展开/折叠”控件，支持键盘操作（Enter或Space切换状态），并在无障碍树中暴露其可展开角色与状态。理论上，现代屏幕阅读器（如JAWS、NVDA、VoiceOver）无需任何额外ARIA装饰即可识别。
然而，问题出在“纯CSS自定义”这一场景——开发者为了视觉效果，往往通过 appearance: none 或完全隐藏默认三角图标，并用CSS伪元素或背景图片替换。这种视觉改造是否破坏了原生无障碍语义？更关键的是，当用户通过 open 属性状态来驱动样式变化时，辅助技术能否自动感知状态切换？
争论焦点：ARIA属性是否必要
一方认为：<details> 的 open 属性是原生布尔属性，浏览器会动态更新无障碍树中的 expanded 状态（即使CSS重写外观）。因此，手动添加 aria-expanded 不仅多余，还可能造成冲突——特别是当开发者错误地绑定动态ARIA值却未与真实状态同步时，反而误导用户。
另一方则援引实际测试数据：在部分老旧辅助技术（如NVDA 2022之前的版本结合Firefox）下，当 <summary> 被完全自定义（例如用 display: none 隐藏原生三角并用CSS生成可点击区域），屏幕阅读器朗读时可能丢失状态变化提示。此时，在 <summary> 元素上显式设置 aria-expanded（并配合 role="button"）能显著提升兼容性。
资深无障碍顾问、W3C用户代理工作组成员Sarah Horton在近期推文中指出：“理想状态下，原生控件不应加ARIA；但现实是，当CSS破坏了语义层暴露方式，开发者有责任用ARIA修复。关键不是‘该不该’，而是‘你的自定义程度是否触发了退化路径’。”
行业实践：两种主流方案对比
GitHub上已有开发者贴出对比测试：在Chrome/VoiceOver（macOS Ventura）中，纯CSS自定义（无ARIA）的 <details> 能够正确朗读“展开/折叠”状态；但在Windows/Chrome+NVDA组合下，如果 <summary> 的内置三角通过 ::before 隐藏且未添加任何指示，NVDA可能只朗读“按钮”而不报告状态变化。修复方案正是动态绑定 aria-expanded="{open}"。
另一个社区测试强调了焦点管理：当 <details> 的 open 属性在点击后变化，部分屏幕阅读器不会自动朗读更新后的内容区域（如 <div> 内部段落）。但该问题与 aria-expanded 无直接关联，通常需要配合 aria-controls 或 role="region" 解决。
最佳实践建议
综合多方技术考量和WCAG 2.2规范，前端开发者可遵循以下准则：
- 若保留原生外观（未隐藏默认三角，未替换点击区域）：无需添加任何ARIA属性，浏览器级语义完全足够。
- 若进行了重度CSS自定义（隐藏原生三角、改变点击行为、或通过绝对定位覆盖
<summary>区域）：强烈建议在<summary>上添加role="button"和aria-expanded="true/false"（注意必须保持与open属性同步）。 - 额外提升：为
<details>容器添加aria-label（如“更多信息”），可帮助部分屏幕阅读器准确识别折叠组件的用途。同时，确保状态变化后焦点不意外跳转，测试所有主流屏幕阅读器组合。
结语
“CSS-only”本身不是无障碍的敌人，敌人是开发者对语义结构的无意识破坏。<details>/<summary> 的魅力在于其开箱即用的可访问性基础，但“纯CSS”追求可能会无意中挖下兼容性陷阱。一个稳妥的答案是：理想情况下不需要，但现实项目中建议加上——毕竟，一行 aria-expanded 代码的成本远低于收到无障碍投诉或法律风险。
这场讨论还未结束。随着浏览器引擎修复和辅助技术的迭代，未来或许能迎来真正的“裸语义”时代。但在此之前，秉持“渐进增强”与“冗余包容”的原则，永远是Web无障碍的坚实底线。