屏幕阅读器对嵌套超3层的DOM结构直接跳过层级语义，因NVDA、VoiceOver等不追溯父级关系且aria-level失效；必须改用role="tree"/"treeitem"并控制DOM深度≤5，禁用ul嵌套和tabindex="0"强行聚焦。
屏幕阅读器对嵌套超3层的完全不报层级
这不是“读得慢”，而是直接跳过语义结构——用户听到一串平铺的列表项，比如“首页、产品、关于我们、联系我们”，却不知道“产品”下面还有“Web端”“移动端”“桌面端”三个子项。根本原因在于，主流屏幕阅读器（NVDA、VoiceOver、JAWS）在解析 DOM 时，对 ul 嵌套深度超过 3 层就停止向上追溯父级关系，aria-level 不再注入，role="group" 也失去上下文锚点。
实测发现：ul > li > ul > li > ul > li（深度5）中，第三层 li 的 aria-posinset 和 aria-setsize 仍存在，但 VoiceOver 不播报“第2项，共3项”，只念文本；NVDA 则直接把所有子项归为同一层级，Tab 键无法进入/退出子菜单。
- 必须用
role="tree"+role="treeitem"替代纯ul/li嵌套，这是 WAI-ARIA 1.2 明确规定的树形控件语义方案 - 每个
treeitem必须有aria-expanded和aria-haspopup="true"（折叠态）或"false"（展开态） - 子节点必须用
role="group"包裹，且group的父级treeitem要设aria-owns指向它，不能靠 DOM 位置隐式关联 - 禁止在
treeitem内再套ul——那会触发双重语义冲突，辅助技术直接忽略内层ul
DOM depth ≥ 6 时 keyboard focus 流失不可逆
键盘用户按 Tab 进入多级菜单后，用 ↓ 或 → 导航时，焦点会在第4–5层突然“消失”：按键有效，但焦点框不显示，document.activeElement 返回 body。这不是 JS 失效，是浏览器在深度 ≥ 6 的 DOM 中无法稳定维护 focusable 状态链。
Chrome 和 Safari 在 layout 阶段会对深度超限节点降级处理：移除 tabindex 的继承链、跳过 focusable 计算、甚至静默丢弃 onfocus 事件绑定。Firefox 表现稍好，但滚动锚点错位率超 70%。
立即学习“前端免费学习笔记（深入）”；
- 用 Chrome DevTools Elements 面板右键节点 → “Show DOM properties”，查
node.depth，≥ 6 的节点必须重构 - 别依赖
tabindex="0"强行聚焦深层元素——它在 depth ≥ 6 时被浏览器忽略，getComputedStyle(el).outline可能返回none即使 CSS 设了 outline - 用
element.focus({preventScroll: true})替代el.focus()，避免因 layout 计算失败导致 focus 失败 - 所有可聚焦元素（如
a、button）必须位于 depth ≤ 5 的路径上；更深层交互改用 click/tap + ARIA-live 区域播报
递归渲染菜单时如何防 depth 爆炸
后端返回扁平菜单数据（[{id:1,parentId:0},{id:2,parentId:1}]），前端递归组件若直接遍历渲染，极易生成 depth ≥ 8 的 DOM。关键不是“怎么递归”，而是“谁来控制深度上限”。
错误做法：在模板里写 v-for 套 v-for，或用 innerHTML += render(item) 字符串拼接——这两者都让 depth 完全失控，且无法在运行时拦截。
- 预处理阶段必须用 Map 构建树形结构，并在构建时记录每个节点的
depth；一旦depth > 5，立即截断并标记hasMore: true - 递归组件开头强制加守卫：
if (props.depth > 5) return null（Vue）或if (depth > 5) return null（React） - 每层只渲染本层
li+a，子菜单用<slot></slot>或childrenprop 传入，禁止组件内部再调用自身 - 用
DocumentFragment批量插入节点，避免中间状态触发多次 layout；但注意：Fragment 不改变 DOM depth，只是减少重排次数
用 display: contents 砍掉无语义 wrapper 层
很多“嵌套深”其实来自框架或 UI 库自动生成的包裹层，比如 Vue 的 <div data-v-xxx>、React 的 <code><div class="component-wrapper">。它们不承载语义，却硬占一层 DOM depth，还干扰 <code>querySelector 路径。
display: contents 是唯一能在不删节点的前提下让父级“视觉消失”的方案：它让父元素退出渲染树，子元素直接受上层 flex/grid 控制，DOM 结构不变，但 depth 计算只认实际参与布局的节点。
- 仅在 Chrome 65+、Firefox 63+、Safari 15.4+、Edge 79+ 支持；IE 完全不支持，需加
@supports (display: contents)条件判断 - 禁止对
<form></form>、<table>、<code><button></button>等有强制语义的父级使用——会导致表单控件失焦、表格错位、按钮点击失效 -
document.querySelector('.wrapper')仍能拿到节点，但getComputedStyle(el).height返回auto，且el.children不变，只是不参与盒模型计算 - 配合
data-depth属性做调试：div[data-depth="6"] { outline: 2px solid red; }，快速定位临界节点
真正卡住可访问性的，从来不是“写了多少层标签”，而是某一层没设
aria-expanded、某一层忘了用 role="treeitem"、或者某次递归没拦住 depth > 5 —— 这些细节在 DOM 深度临界点上会被放大十倍。
