用途
Accordion（手风琴）由垂直堆叠的标题组成，标题可展开或折叠，从而显示或隐藏相关内容。它通过结构化、可交互的方式展示内容，节省屏幕空间。
该模式适合 FAQ、设置面板，以及用户无需滚动浏览全部内容即可访问多个区块的结构化内容。
何时使用
当需要呈现受益于渐进式披露的结构化内容时，可使用手风琴。常见用例包括：
- FAQ（常见问题解答）——用户可快速找到答案
- 设置与偏好——选项可组织为可折叠的分类
- 产品详情或功能——用户可展开自己感兴趣的部分
- 文档或指南——分步内容保持有序
- 导航与筛选——侧边栏用它承载层级内容
何时避免
- 所有内容需要同时可见（如对比表格）
- 内容过短——折叠少量文字会降低可用性
- 需要频繁切换区块——标签页（tabs）更合适
- 多个区块需要同时查看（如条款与条件）——可尝试弹出框、模态框或侧面板
- 多层级深度嵌套——结构化大纲或目录更合适
实现流程
- 在复制示例前，先确认该模式是否匹配问题与约束。
- 从 references/pattern.md 中的结构与示例入手，然后选择最小可行的变体。
- 在叠加视觉润色之前，先应用无障碍、性能和交互防护规则。
- 使用测试指南验证键盘、屏幕阅读器、响应式及失败场景下的行为。
无障碍防护规则
键盘交互模式
下表列出手风琴组件的标准键盘交互。这些交互确保用户仅用键盘即可有效导航和操作手风琴。
| 按键 | 操作 |
|---|---|
| Enter 或 Space | • 展开已折叠的面板；折叠其他所有面板• 折叠已展开的面板 |
| Tab | 将焦点移动到 Tab 顺序中的下一个可聚焦项。焦点会进入手风琴面板 |
| Shift + Tab | 将焦点移动到 Tab 顺序中的上一个可聚焦项 |
| Down Arrow（可选） | 将焦点移动到下一个手风琴标题 |
| Up Arrow（可选） | 将焦点移动到上一个手风琴标题 |
| Home（可选） | 将焦点移动到第一个手风琴标题 |
相关模式
- https://uxpatterns.dev/patterns/content-management/expandable-text
- https://uxpatterns.dev/patterns/content-management/modal
- https://uxpatterns.dev/patterns/navigation/tabs
完整实现细节、示例与测试说明，请参见 references/pattern.md。
模式页面：https://uxpatterns.dev/patterns/content-management/accordion