使用可构建语义清晰、无需JS、键盘及屏幕阅读器友好的FAQ，关键在于结构正确（为首子元素）、支持open属性与锚点定位（details:target或JS兜底）、样式定制时保留可访问性。

直接用

和

就能做出语义清晰、无需 JavaScript、键盘可用、屏幕阅读器友好的 FAQ 栏目。核心是结构写对、样式微调、兼顾锚点和兼容性。

基础结构：每个问题独立一组

每条 FAQ 是一个独立的

，

必须是它的第一个且唯一子元素，后面紧跟答案内容（任意 HTML）：

• ✅ 正确：
  怎么重置密码？

  点击登录页「忘记密码」…

• ❌ 错误：
  …

  …

  

  OpenClaw 插件安装常见问题排查

  解决OpenClaw插件安装中常见npm包名错误、权限问题和安装验证的排查方法及最佳实践。

  下载
  （
  不是首子元素）
• ❌ 错误：

  怎么重置密码？

  …

  （
  是块级标签，破坏行为）

默认展开与锚点定位

让某条 FAQ 加载时就打开，加 open 属性：

。若需支持 URL 锚点（如从邮件跳转到 #payment 并自动展开），给对应

设唯一 ID，并用 CSS 或极简 JS 处理：

• CSS 方案（推荐，Safari 15.4+ 支持）：details:target { open: true; }
• JS 兜底（兼容旧 Safari）：document.getElementById(location.hash.slice(1))?.open = true;，放在 底部即可
• ID 命名建议用小写英文+连字符，如 id="forgot-password"，避免空格和中文

样式定制：统一图标，保留交互

浏览器默认箭头不一致，推荐用 ::before 替换，同时确保焦点和键盘操作不受影响：

• 先清除原生样式：summary { list-style: none; }
• 加自定义符号：summary::before { content: "▶"; margin-right: 6px; }
• 展开时旋转：details[open] > summary::before { content: "▼"; }
• 别用 display: none 隐藏
  ，它必须始终可见、可聚焦

无障碍与兼容底线

这套方案本身已具备良好可访问性，但定制时要守住关键点：

• 不能嵌套 、 等可聚焦元素，否则干扰原生切换逻辑
• 整个 FAQ 区域应包裹在
  中，标题用
  ，并放在
  内
• IE 完全不支持，如需兼容，可降级为全部展开的静态列表，或引入 polyfill（如 details-polyfill）

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！