展现形式 · 概念
Accordion：按需展开的分组内容
Accordion 折叠面板适合收纳哪些独立补充信息，为什么购买条件和价格不应被折叠，以及展开状态、键盘操作和无 JavaScript 退化要求。
Accordion 是一组纵向排列的标题控制项，每个标题负责显示或隐藏关联内容面板。它适合把彼此独立的补充信息留在当前页面，不等于“所有长内容都默认折叠”。
适合与不适合
适合 FAQ、次要规格、分组说明和用户只需查看少数项目的内容。不适合购买条件、错误信息、当前价格、主要行动或必须按顺序阅读的说明；这些信息不应依赖主动展开才能被发现。
优点与缺点
| 优点 | 缺点 |
|---|---|
| 减少同时显示的信息量，便于扫描标题 | 内容被隐藏后更难发现和检索 |
| 用户可按兴趣展开局部内容 | 标题写得不好时无法判断面板内容 |
| 适合多个相互独立的补充主题 | 展开过多时仍会形成很长页面 |
| 能保留当前页面上下文 | 状态、焦点和深链接实现容易出错 |
内容与交互要求
标题必须能预测面板内容，不能统一写成“更多”。明确决定允许同时展开多个、必须保留一个展开，还是全部可折叠。展开与收起不应删除用户已经输入的内容；若面板包含表单或异步状态，需要说明状态保存策略。
响应式与无障碍
每个标题控制使用按钮，并包在与页面结构相符的标题元素中；按钮用 aria-expanded 暴露展开状态，用 aria-controls 关联面板。Enter 或 Space 切换状态，Tab 与 Shift+Tab 按正常页面顺序经过标题按钮和已展开面板中的可操作内容。若某个面板按规则不允许收起，应把该按钮标为不可用，而不是让点击无反应。面板可以使用带名称的 region，但可同时展开的面板较多（APG 建议约 6 个以上）时应避免，否则会制造区域噪声。
状态与退化
只有一个项目时，优先直接显示内容，除非收起本身具有明确任务价值。无 JavaScript 时应默认显示全部正文，或使用原生 <details>/<summary> 这类不依赖脚本的展开方式，不能让内容永久隐藏。通过 URL 指向某个面板时，需要打开对应内容并把位置表达清楚。
发布前检查
- 被折叠的是否都是补充信息？
- 标题能否独立说明面板内容？
- 展开状态、键盘操作和焦点是否可感知？
- 无 JavaScript 与打印时是否显示完整内容？
- 搜索结果或深链接能否到达隐藏内容？