在手风琴（Accordion）组件中，当面板收起时，应使用 display: none 或 visibility: hidden 隐藏内容，而非 aria-hidden="true"；后者不仅冗余，还易引发可访问性缺陷，尤其当面板内含焦点元素时更应严格避免。
在手风琴（accordion）组件中，当面板收起时，应使用 `display: none` 或 `visibility: hidden` 隐藏内容，而非 `aria-hidden="true"`；后者不仅冗余，还易引发可访问性缺陷，尤其当面板内含焦点元素时更应严格避免。
手风琴组件的可访问性实现，核心在于语义清晰与行为一致。W3C ARIA 实践指南明确推荐：为标题（<button></button> 或 <h3></h3> 等触发器）设置 aria-expanded="true/false"，并配合 aria-controls 指向对应面板，从而建立明确的控制关系。而面板内容本身的可见性状态，应由 CSS 控制，而非 ARIA 属性干预。
✅ 正确做法：
- 收起时，对面板元素应用
display: none（推荐）或visibility: hidden； - 展开时，移除该样式，使内容自然可读、可聚焦、可交互；
- 同步更新标题上的
aria-expanded和aria-controls（若未用原生<details></details>/<summary></summary>）。
<button aria-expanded="false" aria-controls="panel-1" id="header-1" > 常见问题一 </button> <div id="panel-1" class="accordion-panel" style="display: none;"> <p>这是折叠的内容……</p> <button>内部操作按钮</button> <!-- 可聚焦元素，必须可访问 --> </div>
❌ 错误做法：
- 在面板上硬编码
aria-hidden="true"并仅靠 JS 切换该属性； - 忘记在展开时同步设为
aria-hidden="false"（甚至遗漏）； - 对含
<input>、<button></button>、<a></a>等可聚焦子元素的面板使用aria-hidden="true"—— 这将导致焦点“悬空”：键盘用户可 Tab 进入，但屏幕阅读器无法播报，严重破坏操作流。
⚠️ 关键注意事项：
-
aria-hidden="true"的设计初衷是视觉可见但对辅助技术隐藏（例如装饰性图标、重复导航链接），绝非通用“隐藏开关”； -
display: none已天然阻止所有辅助技术访问，无需额外aria-hidden；添加它属于冗余且高风险操作； - 若因动画过渡需保留 DOM 而不能用
display: none，可临时结合opacity: 0+height: 0+overflow: hidden，但仍应避免aria-hidden，而用inert属性（现代浏览器支持）或tabindex="-1"+aria-hidden="true"的谨慎组合（仅限无焦点子元素场景）； - 最佳实践是优先使用语义化 HTML：
<details></details>/<summary></summary>原生支持展开/收起及可访问性，无需手动管理 ARIA。
总结：可访问性不是堆砌 ARIA 属性，而是精准传达意图。对手风琴面板，请信任 CSS 的隐藏能力，专注维护 aria-expanded 的准确性与 DOM 结构的语义完整性——简洁、可靠、对所有用户真正友好。
