可访问性树不是DOM副本，而是浏览器基于语义标签、ARIA属性、CSS可见性等规则独立构建的抽象层，仅包含对辅助技术有意义的节点，结构与DOM可能完全不同。
可访问性树不是DOM树的副本，而是独立构建的抽象层
很多人误以为屏幕阅读器读的是 DOM 树本身，其实不是。浏览器在解析 HTML 后，会基于 DOM 节点、语义标签、ARIA 属性、CSS 可见性（display: none、visibility: hidden）、aria-hidden 等规则，**重新生成一棵可访问性树（Accessibility Tree）**。这棵树只包含对辅助技术有意义的节点，且结构可能与 DOM 完全不同。
比如：<div aria-hidden="true"><p>被隐藏的文字</p></div> 在 DOM 中存在，但在可访问性树中被彻底剔除；而一个 <button> 即使没文字，只要没设 aria-label，可访问性树里也可能只有“按钮”这个角色，没有名称——导致屏幕阅读器只读“button”，用户不知道它干啥。
- 可访问性树深度 ≠ DOM 深度：即使 DOM 嵌套 50 层，若中间大量节点带
aria-hidden="true"或display: none，可访问性树可能只剩 3 层 - 语义标签直接提升节点权重：
<nav>、<main>、<header>会被自动赋予对应 role，无需额外 ARIA -
role属性会覆盖原生语义：<button role="link">在可访问性树中变成 link，但失去按钮的键盘交互行为（Enter/Space 不再触发 click）
为什么 aria-level 不能靠手数缩进，必须动态计算
树状结构（如文件夹导航、组织架构图）常需用 aria-level 告知当前节点深度。但这个值**不能硬编码**，也不能靠 HTML 缩进或 class 名（如 level-2）推断——因为可访问性树构建时只看属性和父子关系，不看空格或类名。
错误写法：<li role="treeitem" aria-level="2">子项</li> —— 如果该节点实际被 JS 动态插入到第 4 层，aria-level="2" 就会造成语义错乱，屏幕阅读器会误导用户“这是第二层”，实际却是第四层。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：在节点挂载后，用 JavaScript 遍历父链计算真实层级，再设置
aria-level - 注意
aria-level是从 1 开始计数，根节点必须是 1，不能跳过或重复 - 配合
aria-setsize和aria-posinset使用才有意义，三者需同步更新
role="tree" 的容器必须直接包裹 role="treeitem"，中间不能插 DOM 节点
WAI-ARIA 规范对 role="tree" 的子节点有严格限制：它的直接子节点**只能是 role="treeitem" 或 role="group"**。如果中间混入 <div>、<span> 或文本节点，整个树结构在可访问性树中会被降级为普通列表，丧失“可展开/折叠”语义。
常见翻车现场：
<ul role="tree"> <li><span>标题</span></li> <!-- 错！span 不是 treeitem --> <li role="treeitem">节点1</li> <li><div>说明文字</div></li> <!-- 错！div 不是 treeitem --> </ul>
- 修复方式：所有非
treeitem内容必须包裹进role="treeitem"里，或用role="group"包裹子树 -
<ul>和<li>只是语义友好载体，不是强制要求；纯<div>结构也能用，只要 role 层级合规 - DevTools 的 Accessibility 面板能直接看到可访问性树结构，比 Elements 面板更准——这里能看到哪些节点被过滤、哪些 role 被忽略
可访问性树深度超标的真实瓶颈不在解析，而在遍历与语音合成
浏览器解析 HTML 不会因嵌套深而栈溢出，但可访问性树一旦构建完成，屏幕阅读器在读取时要遍历整棵树、合并文本、处理嵌套关系、生成语音流。当树深度超过 20–30 层（尤其含大量 role="treeitem"），VoiceOver 或 NVDA 就可能出现明显卡顿、延迟播报，甚至跳过深层节点。
- 这不是 bug，是性能权衡：辅助技术优先保证响应速度，对过深结构会做截断或简化
- 避免方案：不用纯 HTML 构建超深树；改用虚拟滚动 + 懒加载，只把可视区域节点注入可访问性树
- 检测方法：Chrome DevTools → Accessibility 面板 → 选中根节点 → 查看 “Related nodes” 下的 child count；超过 100 个
treeitem就该警惕
可访问性树的深度管理，本质是信息密度控制。它不像 DOM 深度那样可以靠工具一键测量，而必须结合 ARIA 属性语义、辅助技术实际行为、以及用户操作路径来逐层校验——漏掉任意一环，都可能导致“代码写全了，但屏幕阅读器根本读不到”。
