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