在手风琴组件中，应避免为折叠面板添加 aria-hidden="true"；正确做法是使用 display: none 或 visibility: hidden 隐藏内容，既满足无障碍要求，又规避因状态不同步导致的内容不可访问风险。
在手风琴组件中，应避免为折叠面板添加 `aria-hidden="true"`；正确做法是使用 `display: none` 或 `visibility: hidden` 隐藏内容，既满足无障碍要求，又规避因状态不同步导致的内容不可访问风险。
手风琴（Accordion）是一种常见交互组件，其核心可访问性实践基于 WAI-ARIA 设计模式：通过 aria-expanded 控制头部按钮的状态，并配合 CSS 控制面板显隐。关键原则在于——视觉隐藏与辅助技术隐藏必须严格同步。
✅ 正确做法：
使用 display: none（推荐）或 visibility: hidden 隐藏折叠面板。这些 CSS 属性天然具备双重效果：
- 对视觉用户完全隐藏内容；
- 对屏幕阅读器自动忽略该元素及其子树（无需额外 ARIA 干预）。
<button aria-expanded="false" aria-controls="panel-1"> 常见问题一 </button> <div id="panel-1" class="accordion-panel" style="display: none;"> <p>这是折叠后不可见的内容，屏幕阅读器也不会读取它。</p> <button>内部按钮（仍可聚焦，但因 display:none 被忽略）</button> </div>
❌ 错误做法：
在面板上硬编码 aria-hidden="true"，同时用 display: block 显示内容（或仅依赖 aria-hidden 而不控制可见性）：
<!-- 危险示例：内容可见但被 aria-hidden 屏蔽 → 视觉用户可见，屏幕阅读器完全无法访问 --> <div id="panel-1" aria-hidden="true" style="display: block;"> <button>这个按钮能被 Tab 焦点捕获，但屏幕阅读器不播报 —— 造成严重混淆</button> </div>
⚠️ 特别注意：
- 若面板内含可聚焦元素（如
、、带tabindex的元素），绝对禁止使用aria-hidden="true"。否则会导致焦点可达但语义不可读的“黑洞状态”，破坏键盘导航逻辑； -
aria-hidden="true"仅适用于视觉可见但需对辅助技术屏蔽的极少数场景（例如装饰性图标、重复性文字、动态加载中的占位符），绝非通用隐藏方案； - 手动切换
aria-hidden值极易出错：展开时若遗漏移除aria-hidden="true"，内容将“看得见却读不到”，比完全不可见更损害用户体验。
? 最佳实践总结：
- 用
display: none/display: block控制面板显隐； - 仅用
aria-expanded同步头部状态； - 确保
aria-controls与面板id正确关联； - 面板容器无需
role="region"等冗余角色（除非有特殊语义需求）； - 测试时务必使用真实屏幕阅读器（如 NVDA + Firefox 或 VoiceOver + Safari）验证焦点流与朗读顺序。
记住 ARIA 的第一准则：“不要添加 ARIA，除非必要；必要时，优先用原生 HTML 和 CSS 解决。” 简洁、健壮、可维护的可访问性，始于对基础机制的尊重。
