删掉无用嵌套可立竿见影提升低端设备可访问性，因VoiceOver/TalkBack依赖DOM结构推断语义，冗余div导致焦点跳过、表格乱序、JS查询超时；应通过DevTools定位连续div路径，仅删除无id/class/样式/交互职责的节点，保留语义标签并避免破坏HTML合法性。
缩减无用嵌套对低能端设备（如低端安卓机、旧款 iPad、语音辅助设备）的可访问性提升是立竿见影的——不是“可能有用”，而是直接决定 VoiceOver/TalkBack 能否正确识别焦点路径、能否线性遍历内容、能否触发按钮交互。
为什么低能端设备对嵌套特别敏感
低端设备内存小、JS 执行慢、渲染管线弱，但更致命的是辅助技术依赖 DOM 结构做语义推断。每多一层无意义 <div>，就多一次节点遍历开销、多一次焦点环计算延迟、多一次屏幕阅读器跳过风险。
-
<div class="wrapper"><div class="inner"><p>正文</p></div></div>这类结构，VoiceOver 会把<p>当作“嵌套在两层匿名容器里的文本”，而非“主内容段落”，导致用户滑动时直接跳过 - DOM depth 超过 6 层时，TalkBack 在竖屏模式下常丢失
<th scope="col">的列关联，表格读成乱序字符串 - 低端 Android 设备上，
document.querySelectorAll('main .card .content p')查询耗时比扁平结构高 3.2 倍，而 JS 辅助脚本（如自定义焦点管理）往往因此超时失效
怎么快速定位并删掉真正“无用”的嵌套
别靠肉眼猜，用 DevTools 直接看真实影响点：
- 打开 Chrome DevTools → Elements 面板 → 右键任意元素 →
Reveal in Elements Panel，观察完整路径深度；重点盯住<body> > <div> > <div> > <section> > <div> > <p>这类含 3 个以上连续<div>的路径 - 检查每个中间
<div>：它有没有id或class被 JS 选中？是否承载独立样式（比如单独的margin或background）？是否包裹了多个逻辑区块？如果没有，就是可删对象 - 运行 Lighthouse 的 “Accessibility” 审计，重点关注 “Heading levels should only increase by one” 和 “Interactive elements should be keyboard focusable” 失败项——80% 源于嵌套导致的焦点流断裂
删嵌套时最容易踩的坑
不是所有嵌套都能删，删错反而让可访问性更差：
立即学习“前端免费学习笔记（深入）”；
- 把
<nav>包在<div class="nav-wrapper">里再删 wrapper —— 错。应直接给<nav>加 class：<nav class="nav-wrapper">，否则<nav>语义丢失，TalkBack 不再识别为导航区 - 为删
<div>把<button>直接塞进<p>—— 错。<p>是纯文本容器，不能合法包含<button>，浏览器会自动拆出 DOM，实际结构变成<p></p><button>，焦点顺序彻底错乱 - 用
display: contents抹掉父级但忘了测 Safari 15.3 以下版本 —— 错。这些旧版 Safari 会把子元素全部塌陷，按钮消失、文字错位，而低能端用户恰恰大量使用旧系统
真正有效的扁平化，是让每一层 DOM 都承担明确职责：要么是语义区块（<header>），要么是交互容器（<form>），要么是逻辑分组（<section>）。删掉的不是标签，是设计模糊地带。
