HTML手风琴实现与aria-expanded使用技巧

使用场景：所有手风琴标题项都应是语义化

面板容器必须设 role="region" 且带唯一 aria-labelledby

仅靠 aria-expanded 不足以让屏幕阅读器把按钮和内容关联起来。没有明确的 ARIA 关系，用户展开后可能完全不知道内容在哪，也无法用快捷键跳转到该区域。

参数差异：aria-labelledby 的值必须严格匹配按钮的 id，大小写、连字符、空格都不能错；role="region" 是必需的，不能用 role="tabpanel"（那是 tab 组件专用）。

• 每个面板加 role="region" 和 aria-labelledby="btn-id"，其中 btn-id 是对应按钮的 id
• 首次加载时，若面板默认展开，aria-expanded 和面板的 hidden 属性/样式要一致（比如 hidden 属性得移除）
• 避免给多个面板共用同一个 id —— ARIA 关系会混乱，NVDA 和 VoiceOver 表现不一

JavaScript 切换时别只改 display: none，要配合 hidden 属性

CSS 的 display: none 虽然隐藏内容，但某些旧版读屏（如 JAWS 2020 以前）对纯 CSS 隐藏识别不稳定；而 hidden 属性是 HTML 原生语义，兼容性更稳，且与 aria-expanded 协同更可靠。

性能影响：现代浏览器中 hidden 和 display: none 渲染开销几乎无差别，但可维护性高——JS 只需操作一个属性，不用管 CSS 类名或内联样式。

• 展开时：移除 hidden 属性，设 aria-expanded="true"
• 折叠时：添加 hidden 属性，设 aria-expanded="false"
• 不要混合使用 hidden 和 aria-hidden="true" —— 后者会屏蔽整个子树，包括按钮里的图标或 span，容易误杀

最易被忽略的是：多个手风琴共存时，每个按钮的 id 和对应面板的 aria-labelledby 必须一一映射，不能复用同一组 ID。一错，整个 ARIA 关系链就断了，无障碍支持形同虚设。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。