超过3层嵌套的ul/ol会显著削弱屏幕阅读器导航能力，因nvda、voiceover等工具线性播报且不主动提示层级，4层起易丢失上下文；需用、aria-label或role="tree"替代，禁用默认标记并加强人工测试。
超过 3 层嵌套的 ul 或 ol 已经显著削弱屏幕阅读器导航能力，不是“能不能渲染”，而是“用户能不能理解”。
为什么第 4 层开始就容易丢失上下文
屏幕阅读器（如 NVDA、VoiceOver）对嵌套列表的播报逻辑是线性下沉：读完父 li 文本后，自动进入其子 ul，但不会主动告知“这是第三级”或“返回上一级”。当嵌套达 4 层（ul > li > ul > li > ul > li > ul），用户听到的是一连串无层级标识的条目，极易迷失位置。
常见错误现象包括：
- 按 H 键跳标题时，直接跳过整个深层列表区域（因缺乏语义锚点）
- 用 Insert+↑/↓ 在列表项间移动时，焦点卡在某一层无法上升
- 使用“列表导航模式”（NVDA+Shift+↑）时，只识别前两层，后续被合并为单个“列表项”
ul 嵌套时 list-style-type 自动降级不可靠
浏览器虽按 CSS 2.1 规定对嵌套 ul 默认降级标记（disc → circle → square），但该行为在实际中不一致：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- Safari 可能跳过第二层，复用
disc - Edge 有时将第三层也渲染为
circle - 启用了字体缩放或高对比度模式后，标记可能被截断或消失
若依赖视觉区分层级，必须显式控制：
ul { list-style-type: disc; }
ul ul { list-style-type: circle; }
ul ul ul { list-style-type: square; }
ul ul ul ul { list-style-type: none; } /* 第四层起禁用默认标记，改用缩进 + aria-label */
替代方案比强行撑深度更有效
当业务逻辑确实需要表达 4 级以上关系（如权限树、多维分类），硬套 ul 嵌套只会让无障碍支持雪上加霜。更可行的做法是：
- 用
<details><summary></summary></details>替代中间层，把“可展开”语义暴露给辅助技术 - 为每层
ul添加aria-label，例如<ul aria-label="二级功能列表"></ul> - 在 JS 渲染阶段，为深层项动态注入
aria-level="4"并配合role="treeitem"（需同时提供role="tree"容器） - 服务端输出前校验树结构，拒绝循环引用或深度 > 6 的数据——前端不做兜底，只做安全截断
测试时最容易忽略的验证点
自动化工具（如 axe）通常只检查标签合法性，不会模拟真实导航流。人工测试必须覆盖：
- 用 VoiceOver 的 rotor 菜单切换到“列表”视图，确认能否逐层进入/退出
- 在 NVDA 中启用“报告列表信息”选项（NVDA+Ctrl+V），看是否播报“嵌套列表”字样
- 关闭 CSS 后纯文本浏览，确认缩进与语义仍可推断层级（即不依赖视觉样式）
- 检查每个
li是否有唯一、描述性的文本内容——空li或仅含图标会导致 AT 静默跳过
真正难的不是写出六层 ul，而是让用户在六层之后还能知道自己在哪、怎么回去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
