嵌套超4层会破坏可访问性，因voiceover/talkback依赖嵌套深度构建导航树，深层div组合导致语义缺失、焦点跳跃或误读为纯文本，必须用语义标签替代并验证landmark角色与交互元素可聚焦性。
精简 HTML 层级不是为了“看起来干净”，而是直接决定屏幕阅读器能否正确建立内容层级、焦点顺序是否可预测、以及 DOM 遍历性能是否掉坑里。
为什么嵌套超 4 层会破坏可访问性
VoiceOver 和 TalkBack 在解析 DOM 时，会按嵌套深度构建“导航树”。一旦出现 <div><div><div><div><nav><ul><li><a> 这类结构，辅助技术容易跳过中间层级、误判语义边界，甚至把整个导航块读作“一段文字”而非“可交互菜单”。Chrome DevTools 的 Accessibility 面板中若显示 “No landmark roles found” 或 “Unlabeled interactive element”，往往就藏在这类嵌套里。
<ul><li>嵌套超过 4 层的 <code><div> 组合，基本可判定为语义缺失——浏览器和 AT 都无法从中提取任何结构信号
<li>用 <code><div class="card"><div class="card-body"><div class="card-content"> 包裹一段段落，等于告诉屏幕阅读器：“这是一堆没名字的盒子”
<li>移动端滑动切换焦点时，深层嵌套会导致焦点“跳跃”或“卡住”，尤其在 iOS 上表现明显</li>
<h3>用语义标签替代嵌套容器的实操边界</h3>
<p>不是所有 <code><div> 都该删，但每个保留的 <code><div> 必须有明确职责：被 JS 操作、需独立样式作用域、或作为 Flex/Grid 容器。其余一律按内容意图替换。
<ul><li><code><div class="header"> → <code><header></header>，且内部必须含 <h1></h1> 或 logo + 导航组合
<div class="main-content"> → <code><main></main>，页面有且仅有一个 <main></main>，不能嵌套在 <section></section> 内
<div class="article-list"><div class="item">...</div></div> → 直接用 <article></article> 包每条内容，外层用 <section></section> 或 <main></main>，不加额外 wrapper<div class="btn-group"> 不需要语义标签，但必须用 <code><div role="group" aria-label="操作按钮组"> 补充可访问性上下文
<h3>检查与验证：别只看 Elements 面板</h3>
<p>DevTools 的 Elements 面板只能看到结构，真正验证可访问性得靠运行时行为。以下三步缺一不可：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img
src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a>
<p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>打开 Chrome 的 Lighthouse，跑一次 Accessibility Audit，重点关注 “Heading levels”、“Landmark is unique”、“Interactive elements should have a keyboard focus indicator” 报错项</li>
<li>在 macOS 上启用 VoiceOver（<code>Cmd+F5），用 Ctrl+Option+Arrow 键逐层导航，观察是否能自然进入/退出 <nav></nav>、<main></main>、<aside></aside>
最容易被忽略的点是：即使你用了 <header></header> 和 <nav></nav>，如果它们内部没有可聚焦元素（比如 <a></a> 缺 href，或 <button></button> 被 disabled 却没移除 tabindex），整个语义结构就形同虚设——AT 会跳过它，键盘用户也进不去。
