应使用<section>包裹FAQ区域并配合<h2>标题和<details><summary>实现可折叠问答，因其无障碍支持最佳、语义最清晰；<article>和<aside>不适用，因FAQ不满足独立分发标准且非附属内容。
<section> 是最直接、最稳妥的选择，配合 <h2> 或更合适的标题层级，再用 <details> + <summary> 实现可折叠问答——这是当前无障碍支持最好、语义最清晰的组合。
为什么不用 <article> 或 <aside>？
FAQ 条目虽然独立，但通常不满足 <article> 的“可独立分发/复用”标准（比如不能被 RSS 抓取、不带明确作者/发布时间）；<aside> 则专指与主内容相关但非核心的补充信息（如侧边广告、作者简介），FAQ 是用户主动查找的核心帮助内容，不属于“附属”。滥用这两者反而会干扰屏幕阅读器对内容主次的判断。
<details> + <summary> 的实际写法和注意点
这对标签原生支持展开/收起，无需 JS 就能提供交互，且自带 ARIA 语义（aria-expanded、role="group" 等由浏览器自动管理）：
<section aria-labelledby="faq-title">
<h2 id="faq-title">常见问题解答</h2>
<details>
<summary>如何重置密码？</summary>
<p>请访问登录页点击「忘记密码」，按邮件指引操作。</p>
</details>
<details>
<summary>支持哪些支付方式？</summary>
<p>我们支持支付宝、微信支付和银联云闪付。</p>
</details>
</section>
-
<section>包裹整个 FAQ 区域，用aria-labelledby显式关联标题，强化结构感知 - 每个
<details>必须有且仅有一个<summary>，不可省略或重复 - 避免在
<summary>里嵌套链接或按钮——它本身已是可聚焦、可激活的交互元素 - 旧版 Safari（≤15.6）对
<details>的键盘导航支持较弱，如需兼容，可加简单 JS fallback（仅影响体验，不破坏语义）
标题层级和 <main> 的位置关系
FAQ 区域通常是页面主体的一部分，应放在 <main> 内部，而非 <aside> 或 <footer>。标题用 <h2> 即可（除非 FAQ 是整页唯一内容，才考虑 <h1>）；每个问题内部**不要**再用 <h3> 包裹 <summary>——<summary> 本身不是标题，强行套 <h3> 会制造冗余层级，破坏大纲结构。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是：FAQ 不是“装饰性模块”，它的语义强度取决于是否被正确嵌套在 <main> 中、是否用 <details> 而非纯 CSS 模拟折叠、以及标题是否真实参与文档大纲——这三点没做到，再漂亮的样式也救不了可访问性。
