让 AI 做折叠 FAQ：用原生 HTML，再检查键盘和隐藏答案

FAQ 做成一长页不容易扫读，但把答案藏进漂亮的按钮，也可能让键盘用户打不开。这里让 AI 帮忙生成两组浏览器原生折叠问答，再用一份小清单验收。重点是网页交付，不是让 AI 编造业务答案。

准备什么，哪些事情不必付费

准备纯文本编辑器、现代浏览器，以及两条已经确认的规则。HTML 文件可以离线打开，不需要购买插件、网站空间或调用 API。AI 只用于生成初稿与检查单，可用你已有的文字助手；额度和费用以所用服务为准。不要把客户资料、内部政策或密码当练习素材。

第一步：先把不能藏起来的信息写在外面

本例是虚构的文件提交说明：只接收 PDF；截止前允许重新提交。把这两条放在标题下面，始终可见，再把补充说明放进折叠区。正式页面里的价格、截止时间、风险提示等关键条件，也不宜只藏在需要点击才能看到的答案中。

第二步：给 AI 一个结构明确的要求

把以下两条已确认的练习规则做成独立 HTML 文件：
只接收 PDF；截止前允许重新提交。
这是假想练习，不要添加真实服务、日期、承诺或上传入口。
要求：两组 details，每组第一个子元素是纯文字 summary；
全部答案直接写在 HTML 中。标题下始终显示两条规则摘要。
不用 JavaScript，不添加自定义 role、aria-expanded 或 tabindex；
保留浏览器默认展开标记及焦点提示，不做只能点一处的小图标。
最后给出键盘、窄屏、页内查找和发布后内容检查清单。

MDN 的 details 文档说明了原生展开控件及其开关状态。这里让每条问答独立打开，不使用同名分组强制关掉另一条，方便读者对照两个答案。

第三步：保存一个可以独立打开的小文件

把下面内容保存为 UTF-8 编码的 faq.html。确认文件名不是 faq.html.txt，然后用浏览器打开。示例没有脚本、远程字体或网络请求，练习答案直接在文件里。

<!doctype html>
<html lang="zh-CN">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>文件提交问答练习</title>
<main>
  <h1 id="top">文件提交问答练习</h1>
  <p>练习规则：只接收 PDF；截止前可以重新提交。
  以下内容为虚构演示，不是真实服务条款。</p>
  <details>
    <summary>可以提交图片吗？</summary>
    <p>本练习只接收 PDF。请先确认导出的文件能打开，
    再交给接收方。</p>
  </details>
  <details>
    <summary>提交后发现错字怎么办？</summary>
    <p>练习允许截止前重新提交。修改后使用新文件名，
    并核对接收方收到的是哪一版。</p>
  </details>
  <p><a href="#top">返回标题</a></p>
</main>
</html>

MDN 提醒 summary 的辅助技术映射存在平台差异。因此本例只放简短问题文字，不在开关里再嵌套标题、链接或按钮。需要继续阅读的链接放在答案里，并单独验收。

本页演示：先点开，再试键盘

交互演示：以下为虚构练习。两条关键规则始终可见：只接收 PDF；截止前可以重新提交。

第四步：按实际操作验收

1. 只用 Tab 移到问题上，确认能看见焦点位置。分别用 Enter 和空格尝试展开、收起；不能只测试鼠标点击。
2. 展开第一条，再展开第二条，核对两条可以同时保留。继续按 Tab 应能离开问答，不被困在控件里。
3. 缩窄窗口，检查长问题自然换行，答案不需要拖动整个页面才能读完。不要为了漂亮删除焦点轮廓或原生展开标记。
4. 收起答案后，用浏览器页内查找搜索答案中的词，再记录所用浏览器、版本和结果。不同浏览器的查找、自动展开及滚动行为可能不同；不能以一台电脑的结果保证所有访客都能找到。
5. 如果需要打印或导出 PDF，先展开全部答案，再看打印预览，逐条核对内容。预览遗漏时，使用始终展开的普通问答版本交付。

WAI 的 Disclosure 模式可用于核对 Enter、空格等交互预期，但其中自制控件的 ARIA 说明不应机械复制到本例的原生 summary 上。键盘通过也不等于完成读屏测试或符合所有无障碍要求。

第五步：上线后重新查一次，失败先退回普通文本

粘贴到网站前保留原始文件和旧正文；只把 main 内需要的内容放入文章，不把整个 HTML 文档嵌套进去。用代码/HTML 区块保存后，重新打开公开页，检查问题、答案和展开控件是否还在。编辑器可能过滤标签，主题也可能改变样式，离线可用不代表上线就可用。

遇到点击无反应、焦点看不见或正文被过滤，先恢复为普通标题加段落，让读者能看到完整答案，再定位具体样式或编辑器问题。不要临时叠加不明脚本或装一个插件来掩盖错误。

来源与下一步

资料核对日期：2026 年 11 月 1 日。Chrome 的隐藏内容查找指南支持优先考虑原生方案，但仍应在目标浏览器验收。另查阅了 MDN GitHub 文档源文件和许可说明；本文练习文字与代码为原创，没有搬运仓库页面或安装依赖。

如果还没有可靠答案，先做带依据的 FAQ 内容整理。若下一步要呈现多列信息，可接着看HTML 表格的表头关联与键盘滚动。完成本练习的标准是两条答案完整、能开能关、键盘能离开，并保留一份始终可读的退路。