在手风琴组件中，应优先使用 display: none 或 visibility: hidden 隐藏折叠面板内容，而非 aria-hidden="true"；后者仅适用于“视觉可见但需对屏幕阅读器隐藏”的特殊场景，滥用反而会引发可访问性问题。
在手风琴组件中，应优先使用 `display: none` 或 `visibility: hidden` 隐藏折叠面板内容，而非 `aria-hidden="true"`；后者仅适用于“视觉可见但需对屏幕阅读器隐藏”的特殊场景，滥用反而会引发可访问性问题。
手风琴（Accordion）是一种常见交互组件，其可访问性实现需严格遵循 WAI-ARIA 实践指南。核心原则是：用恰当的 CSS 隐藏内容，而非依赖 aria-hidden。
✅ 正确做法：
- 为每个面板（panel）设置
display: none（折叠时）或display: block（展开时）； - 在
<button></button>或<h3></h3>等触发器元素上使用aria-expanded="true/false"； - 通过
aria-controls关联触发器与对应面板的id； - 面板容器无需添加
aria-hidden—— 因为display: none已天然阻止其被屏幕阅读器解析。
<button aria-expanded="false" aria-controls="panel-1" id="trigger-1" > 常见问题一 </button> <div id="panel-1" class="accordion-panel" style="display: none;"> <p>这是折叠状态下的详细内容……</p> </div>
❌ 错误做法：
- 在面板上硬编码
aria-hidden="true"并手动切换； - 忘记同步更新
aria-hidden状态（如展开后未设为"false"），导致内容可见却不可读； - 对含焦点元素（如
<input>、<button></button>）的面板使用aria-hidden="true"—— 这将使键盘用户能 Tab 进入但屏幕阅读器完全静默，造成严重逻辑断裂。
⚠️ 特别注意：aria-hidden="true" 的设计初衷是解决「视觉可见但语义需隐藏」的极少数场景（例如装饰性图标、重复导航链接）。它不是通用的“隐藏开关”，更不替代 CSS 可见性控制。W3C 明确指出：当元素已通过 display: none 或 visibility: hidden 隐藏时，aria-hidden 是冗余且危险的。
? 总结建议：
- 信任 CSS 隐藏机制：
display: none是最安全、最可靠、最易维护的隐藏方式； - 专注语义化 ARIA：用
aria-expanded、aria-controls、role="region"（可选）构建清晰的父子关系； - 测试验证：使用 NVDA/JAWS + Chrome 或 VoiceOver + Safari，检查折叠/展开时焦点流、朗读顺序与内容同步性。
记住：可访问性不是叠加属性，而是用最少、最精准的语义，达成最大兼容性。
