帮助文档页核心是让每个问题可定位、可搜索、可被屏幕阅读器读出；必须用带唯一id的包裹FAQ，标题用，展开用原生，搜索与分类置于顶部。

直接说结论：帮助文档页不是「把文字堆进去就行」的页面，核心是让每个问题可定位、可搜索、可被屏幕阅读器读出。用错结构，用户点链接打不开具体条目，SEO 抓到内容却无法跳转，无障碍测试直接失败。

每个 FAQ 条目必须用

包裹且带唯一 id

常见错误是写成

登录失败怎么办？

请检查密码...

——这会导致三个实际问题：

• 搜索引擎无法识别这是独立问答单元
• 屏幕阅读器无法将标题和答案建立语义关联
• 键盘用户 Tab 键会跳过整个区块（因为
  默认不可聚焦）

  正确写法必须满足三点：

  • 外层用
    ，不是
    或
  • id 值唯一且有意义，比如 id="faq-login-failed"，方便锚点链接和 JS 操作
  • 标题必须用
    （不是
    ），否则层级关系断裂

  折叠展开优先用原生

  ，别手写 JS

  原生组合对 SEO 和无障碍最稳，但 iOS Safari 上容易卡顿或不响应，根本原因不是标签本身有问题，而是 CSS 阻断了渲染流程。

  典型踩坑点：

  • 给
    设了 overflow: hidden 或 height: 0，覆盖了原生行为
  • 在
    上加了 tabindex="-1"，导致键盘用户无法聚焦
  • 用 JS 监听 click 后又手动调用 open = !open，干扰了原生状态同步

  推荐零 JS 写法：

  <section id="faq-login-failed"><details><summary>登录失败怎么办？</summary><p>请检查密码是否输入正确，或尝试重置密码。</p>
    </details></section>

  注意：图标（如 ▶）必须加 aria-hidden="true"，否则屏幕阅读器会念“黑色三角形”。

  
  使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
  使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
  下载

  搜索框和分类导航必须放在

  内顶部

  80% 的用户进帮助中心第一动作是「找」，不是「读」。所以搜索框和分类导航不是装饰，而是主内容的辅助信息。

  错误做法：

  • 塞进
    或
    里（语义错位，SEO 权重被稀释）
  • 用绝对定位脱离文档流（键盘焦点顺序错乱，无障碍失效）

  正确位置：

  开头紧贴顶部，结构示例：

  <main><div class="help-header">
      <input type="search" aria-label="搜索帮助文档"><nav aria-label="帮助分类"><a href="#category-account">账户管理</a>
        <a href="#category-security">安全设置</a>
      </nav>
  </div>
    <!-- 后续所有 <section> FAQ 条目 -->
  </main>

  为什么不能用

  当 FAQ 标题？

  不是“不能用”，而是它会破坏语义层级链。帮助页主标题是

  （如“系统帮助中心”），每个 FAQ 是独立子单元，应统一用
  表达并列关系。

  如果混用

  ，后果包括：
  • 屏幕阅读器跳过时无法按 h2 批量导航，只能逐个 tab
  • 语音助手（如 Siri、小爱同学）无法准确提取问题列表
  • W3C 验证器报 warning，部分无障碍检测工具直接标为 fail

  更关键的是：浏览器原生大纲视图（开发者工具 → Accessibility → Landmarks）里，

  才会被识别为可跳转节点；
  只算段落内强调，不进大纲。