优化HTML底层树形结构对低配环境可访问性提升的核心是砍冗余嵌套、强制语义收敛、用原生层级替代JS模拟树，而非堆砌ARIA；因旧版读屏不解析动态ARIA、忽略深层嵌套、降级非标准容器，且依赖JS/CSS的交互在无JS或低端设备中失效。
直接说结论：优化 HTML 底层树形结构对低配环境（如旧版屏幕阅读器、低端 Android 设备、无 JS 或 JS 被禁用场景）的可访问性提升，核心不在加多少 ARIA，而在于砍掉冗余嵌套、强制语义收敛、用原生层级替代 JS 模拟树——否则 ARIA 属性可能被忽略、role="tree" 在 TalkBack 12 以下版本根本无效。
为什么低配环境下 ARIA 树常失效
很多开发者一上来就套 role="tree" + aria-expanded，但实际在低端设备上，这些属性常被跳过或静默丢弃。原因很实在：
- TalkBack（Android 8–10）、NVDA 2019 及更早版本不解析动态注入的
aria-属性，只读取初始 DOM 中静态存在的语义 - JS 禁用时，
aria-expanded值不会更新，屏幕阅读器持续播报“已展开”，而内容实际不可见 -
role="treeitem"若包裹在非ul/ol容器里，部分老读屏会直接降级为普通列表项，失去父子关系感知 - 嵌套超过 4 层的
div+role组合，在内存 ≤2GB 的设备上触发渲染卡顿，焦点移动延迟超 800ms
用原生 /- 结构替代 JS 驱动的树
低配环境最可信的是 HTML 原生层级，不是 JS 控制的显隐。把“树”当成真实嵌套结构来写，而不是视觉模拟：
- 每个子节点必须是父
li的直接子ul，不能用div.tree-children+ CSSdisplay: none隐藏 - 禁止在
li内混用span和button作为“节点控件”——老版本 TalkBack 无法聚焦span，必须用button或带tabindex="0"的div - 初始状态全部展开（即所有
ul默认可见），靠 CSS 控制视觉收起，确保无 JS 时内容仍可线性读取 - 示例结构必须长这样：
<ul role="tree"> <li role="treeitem"> <button aria-expanded="true">文档</button> <ul> <li role="treeitem">入门指南</li> <li role="treeitem">API 参考</li> </ul> </li> </ul>
砍掉三层以上嵌套 + 合并语义容器
低配设备解析 DOM 的开销远高于现代机，每多一层嵌套，VoiceOver 切换焦点平均慢 120ms。实操重点是收缩而非装饰：
立即学习“前端免费学习笔记（深入）”；
- 检查
nav区域内是否套了div > div > ul > li > div > a—— 这种结构必须压到nav > ul > li > a，删掉所有中间div -
section下子元素超过 50 个？立刻拆成多个section，避免单次遍历耗时飙升 - 不用
aria-labelledby指向远处 ID，改用aria-label直接写死文本（如aria-label="折叠文档子菜单"），减少 ID 查找开销 - 禁用
tabindex="1"或更高值——低配读屏只认tabindex="0"和天然可聚焦元素
真正难的不是写对 ARIA，而是忍住不用 JS 做交互、不用 CSS 做隐藏、不用 div 做包装。低配环境认的是“HTML 写出来什么样，就读出来什么样”。任何依赖运行时补全的语义，在它眼里都是空的。
