应使用而非+aria-expanded实现评论嵌套，因其原生支持层级语义与无障碍读取；须严格保证子为父直接子元素并完整闭合，配合css计数器生成“2.1”类编号，且每条评论需为语义完整单元，最大嵌套限3层并提供平铺备选。

用

而不是
套嵌套评论

HTML 里没有“评论树”原生语义，但 <ol></ol> 天然表达层级顺序和嵌套关系，屏幕阅读器能按 DOM 层级线性读取，且不依赖 JS。用 <div> + <code>aria-expanded 模拟树，在 TalkBack 12 以下或 JS 禁用时直接失效。

常见错误是把子回复塞进父 <li> 末尾却不闭合内层 <ol></ol>，导致 DOM 结构断裂、读屏跳过整段回复。必须严格遵循：每个子级 <ol></ol> 是父 <li> 的**直接子元素**，且完整闭合。

• <ol class="replies"></ol> 必须作为 <li class="comment"> 的第一个/唯一子元素，不能放在 <p></p> 后面或用绝对定位抽离
• 禁止用 <ul></ul> 替代 <ol></ol>——即使不显示数字，<ol></ol> 的“有序性”语义对评论时间线更准确
• 每层 <ol></ol> 都要加 class（如 replies-level-2），方便 CSS 计数器和无障碍样式隔离

用 CSS counter-increment 控制缩进与层级标识

靠 margin-left 实现嵌套缩进，在 3 层以上容易错位，且无法自动标注“回复 2-1”这类路径信息。CSS 计数器能把结构层级和视觉表现解耦，也兼容无 JS 场景。

关键不是给所有 <ol></ol> 统一计数，而是每层独立重置：

• 顶层 <ol class="comments"></ol> 设 counter-reset: comment;
• 每层 <ol class="replies"></ol> 设 counter-reset: reply;，避免父子计数混叠
• 用 ::before 在 <li class="comment reply"> 前插入 counter(replies) "." counter(comment)，生成 “2.1” 类编号

别忘了给 <li> 加 counter-increment: comment;，否则计数器不递增。



Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

每个

必须包裹完整评论块，不能只包文本

很多实现把作者、时间、内容、操作按钮拆成多个同级 <div>，再用 CSS 视觉拼凑，结果屏幕阅读器读出来是“张三 2026-08-25 回复内容 删除”，完全丢失语义分组。这会让视障用户无法判断哪段是作者名、哪段是操作按钮。 <p>正确做法是：每个 <code><li class="comment"> 内部是一个自包含的语义单元，结构必须含：

• <p class="comment-author"></p> 或 <span role="note"></span> 包裹作者与时间（带 datetime 属性）
• <div class="comment-content"> 包裹正文，支持多段落、链接、引用等 <li><code><div class="comment-actions"> 放回复、点赞、删除按钮，且每个按钮都用 <code><button></button>（不用 <div role="button">） <p>如果某条评论是纯文本回复，仍需用 <code><div class="comment-content"><p>…</p></div> 包裹，确保 AT 不会把它和上一条的作者名连读。

  限制最大嵌套深度为 3 层并提供平铺备选

  超过 3 层的 <ol></ol> 嵌套，在低端 Android 设备上会导致 VoiceOver 焦点切换延迟超 800ms，且用户极易迷失在“回复的回复的回复”中。这不是体验问题，是可访问性硬伤。

  解决方案不是强行撑到 5 层，而是主动截断 + 提供替代路径：

  • 后端或渲染逻辑限制最大嵌套深度为 3，第 4 层起自动降级为平铺式“相关讨论”，用 <section aria-labelledby="related-heading"></section> 单独区块展示
  • 在第 3 层末尾插入 <li class="comment-more"><button>查看全部 7 条深层回复</button></li>，点击后跳转到独立页面或模态框，用完整线性列表呈现
  • 所有“查看更多”按钮必须有 aria-expanded 和 aria-controls，指向目标容器 ID，让屏幕阅读器明确知道它控制什么

  真正难的不是写多深的嵌套，而是判断什么时候该停——3 层是实测下来兼顾语义清晰度与低配设备响应速度的临界点。