HTML如何做手风琴无障碍_html手风琴aria-expanded设置【技巧】
HTML如何做手风琴无障碍_html手风琴aria-expanded设置【技巧】的重点在于把前置条件、操作顺序和容易误判的地方分清楚。
aria-expanded 必须实时同步按钮展开状态，否则屏幕阅读器播报错误；按钮须用语义化 <button> 而非 div+role="button"；面板容器需设 role="region" 且通过 aria-labelledby 唯一关联按钮 ID；切换时同步更新 aria-expanded 和 hidden 属性。
aria-expanded 必须和按钮的展开状态实时同步
这个属性不是“设一次就完事”的装饰性标记，它直接决定屏幕阅读器是否播报“已展开/已折叠”。如果 JavaScript 控制了面板显隐但忘了更新 aria-expanded，用户会听到错误状态，甚至无法触发后续操作。
常见错误现象：aria-expanded="false" 但面板实际是展开的；或者点击后按钮状态变了，aria-expanded 还卡在旧值上。
- 每次切换面板前，先读取当前
aria-expanded值（用getAttribute('aria-expanded') === 'true'，别用布尔比较） - 切换 DOM 显隐后，立即用
setAttribute('aria-expanded', 'true')或'false'更新 - 不要依赖 CSS 类名或自定义 data 属性来判断状态——屏幕阅读器只认
aria-expanded
按钮必须用 <button>，不能用 <div> + role="button"
用 <div role="button"> 虽然能加 aria-expanded，但缺了原生 <button> 的键盘行为：空格/回车触发、自动获得焦点、默认可聚焦。视障用户靠键盘导航时，这类“伪按钮”极易被跳过或无法激活。
使用场景：所有手风琴标题项都应是语义化 <button>，包裹文字即可，无需额外 role。
-
<button>自带type="button"，避免表单意外提交 - 如果标题含链接或复杂结构，用
tabindex="-1"配合 JS 手动管理焦点流，但按钮本身不能降级为<div> - 禁用
pointer-events: none或disabled时，记得同步设aria-disabled="true"，否则屏幕阅读器仍会提示“可点击”
面板容器必须设 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 关系链就断了，无障碍支持形同虚设。
