超过3层嵌套的ul或ol会实质性破坏屏幕阅读器可用性，因播报无层级提示导致用户迷路；第4层起需禁用默认标记，改用缩进+aria-label/aria-level，并优先采用details/summary、tree角色等语义化替代方案。
超过3层嵌套的 ul 或 ol 会实质性破坏屏幕阅读器可用性，不是“能用”，而是“用户会迷路”——必须主动限制并替换。
为什么第4层开始就容易丢失上下文
屏幕阅读器（如 NVDA、VoiceOver）对嵌套列表的播报是线性下沉：读完父级 li 文本后，直接进入其子 ul，但不会提示“这是第三级”或“返回上一级”。当结构达到 ul > li > ul > li > ul > li > ul（即第4层），用户听到的是一串无层级标识的条目，无法判断当前位置或父子关系。
常见错误现象包括：
- 按
H键跳标题时，整个深层列表区域被跳过（缺乏语义锚点） - 用
Insert+↑/↓在列表项间移动时，焦点卡在某一层无法上升 - 启用 NVDA 的“列表导航模式”（
NVDA+Shift+↑）时，只识别前两层，后续被合并为单个“列表项”
如何显式控制嵌套样式而不依赖浏览器自动降级
浏览器虽按 CSS 2.1 规定对嵌套 ul 默认降级标记（disc → circle → square），但该行为不可靠：Safari 可能跳过第二层，Edge 有时将第三层也渲染为 circle；开启字体缩放或高对比度模式后，标记还可能被截断。
立即学习“前端免费学习笔记（深入）”；
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
正确做法是显式重置每层样式：
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; }
第4层起禁用默认标记，改用缩进 + aria-label 或 aria-level 提供语义支撑。
替代深层嵌套的可行方案
当业务逻辑确实需要表达4级以上关系（如权限树、多维分类），硬套 ul 嵌套只会让无障碍支持雪上加霜。更可行的做法包括：
- 用
<details><summary>替代中间层，把“可展开”语义暴露给辅助技术 - 为每层
ul添加aria-label，例如<ul aria-label="二级功能列表"> - 在 JS 渲染阶段，为深层项动态注入
aria-level="4"并配合role="treeitem"（需同时提供role="tree"容器） - 服务端输出前校验树结构，拒绝循环引用或深度 > 6 的数据——前端不做兜底，只做安全截断
测试时最容易忽略的验证点
自动化工具（如 axe）通常只检查标签合法性，不会模拟真实导航流。人工测试必须覆盖：
- 用 VoiceOver 的 rotor 菜单切换到“列表”视图，确认能否逐层进入/退出
- 在 NVDA 中启用“报告列表信息”选项（
NVDA+Ctrl+V），看是否播报“嵌套列表”字样 - 检查
aria-level是否与视觉层级一致，且未因 JS 动态更新而错位
真正难的不是写出6层 ul，而是让每个盲人用户都能在第4层知道“我在哪、怎么回去”。这需要设计阶段就放弃“结构能渲染就行”的思维，转而以导航路径为约束来反推 HTML 形态。
