帮助文档页核心是让每个问题可定位、可搜索、可被屏幕阅读器读出；必须用带唯一id的包裹FAQ，标题用，展开用原生，搜索与分类置于顶部。
直接说结论：帮助文档页不是「把文字堆进去就行」的页面，核心是让每个问题可定位、可搜索、可被屏幕阅读器读出。用错结构，用户点链接打不开具体条目，SEO 抓到内容却无法跳转，无障碍测试直接失败。
每个 FAQ 条目必须用 <section></section> 包裹且带唯一 id
常见错误是写成 <div class="faq-item">
<h3>登录失败怎么办？</h3>
<p>请检查密码...</p>
</div>——这会导致三个实际问题：
- 搜索引擎无法识别这是独立问答单元
- 屏幕阅读器无法将标题和答案建立语义关联
- 键盘用户 Tab 键会跳过整个区块（因为
<div> 默认不可聚焦）<p>正确写法必须满足三点：</p> <ul><li>外层用 <code><section></section>，不是<div> 或 <code><article></article> -
id值唯一且有意义，比如id="faq-login-failed"，方便锚点链接和 JS 操作 - 标题必须用
<h2></h2>（不是<h3></h3>），否则层级关系断裂 - 给
<details></details>设了overflow: hidden或height: 0，覆盖了原生行为 - 在
<summary></summary>上加了tabindex="-1"，导致键盘用户无法聚焦 - 用 JS 监听
click后又手动调用open = !open，干扰了原生状态同步
折叠展开优先用原生 <details><summary></summary></details>，别手写 JS
原生组合对 SEO 和无障碍最稳，但 iOS Safari 上容易卡顿或不响应，根本原因不是标签本身有问题，而是 CSS 阻断了渲染流程。
立即学习“前端免费学习笔记（深入）”；
典型踩坑点：
推荐零 JS 写法：
<section id="faq-login-failed">
<details>
<summary>登录失败怎么办？</summary>
<p>请检查密码是否输入正确，或尝试重置密码。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
<p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
</div>
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</details>
</section>注意：图标（如 ▶）必须加 aria-hidden="true"，否则屏幕阅读器会念“黑色三角形”。
搜索框和分类导航必须放在 <main></main> 内顶部
80% 的用户进帮助中心第一动作是「找」，不是「读」。所以搜索框和分类导航不是装饰，而是主内容的辅助信息。
错误做法：
- 塞进
<header></header>或<nav></nav>里（语义错位，SEO 权重被稀释） - 用绝对定位脱离文档流（键盘焦点顺序错乱，无障碍失效）
正确位置：<main></main> 开头紧贴顶部，结构示例：
<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>为什么不能用 <h3></h3> 当 FAQ 标题？
不是“不能用”，而是它会破坏语义层级链。帮助页主标题是 <h1></h1>（如“系统帮助中心”），每个 FAQ 是独立子单元，应统一用 <h2></h2> 表达并列关系。
如果混用 <h3></h3>，后果包括：
- 屏幕阅读器跳过时无法按
h2批量导航，只能逐个 tab - 语音助手（如 Siri、小爱同学）无法准确提取问题列表
- W3C 验证器报 warning，部分无障碍检测工具直接标为 fail
更关键的是：浏览器原生大纲视图（开发者工具 → Accessibility → Landmarks）里，<h2></h2> 才会被识别为可跳转节点；<h3></h3> 只算段落内强调，不进大纲。
