嵌套超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”，往往就藏在这类嵌套里。
- 嵌套超过 4 层的
<div>组合，基本可判定为语义缺失——浏览器和 AT 都无法从中提取任何结构信号 - 用
<div class="card"><div class="card-body"><div class="card-content">包裹一段段落，等于告诉屏幕阅读器：“这是一堆没名字的盒子” - 移动端滑动切换焦点时，深层嵌套会导致焦点“跳跃”或“卡住”，尤其在 iOS 上表现明显
用语义标签替代嵌套容器的实操边界
不是所有 <div> 都该删，但每个保留的 <div> 必须有明确职责：被 JS 操作、需独立样式作用域、或作为 Flex/Grid 容器。其余一律按内容意图替换。
-
<div class="header">→<header>，且内部必须含<h1>或 logo + 导航组合 -
<div class="main-content">→<main>，页面有且仅有一个<main>，不能嵌套在<section>内 -
<div class="article-list"><div class="item">...</div></div>→ 直接用<article>包每条内容，外层用<section>或<main>，不加额外 wrapper -
<div class="btn-group">不需要语义标签，但必须用<div role="group" aria-label="操作按钮组">补充可访问性上下文
检查与验证：别只看 Elements 面板
DevTools 的 Elements 面板只能看到结构，真正验证可访问性得靠运行时行为。以下三步缺一不可：
立即学习“前端免费学习笔记（深入）”；
- 打开 Chrome 的 Lighthouse，跑一次 Accessibility Audit，重点关注 “Heading levels”、“Landmark is unique”、“Interactive elements should have a keyboard focus indicator” 报错项
- 在 macOS 上启用 VoiceOver（
Cmd+F5），用Ctrl+Option+Arrow键逐层导航，观察是否能自然进入/退出<nav>、<main>、<aside> - 用 Android 手机开启 TalkBack，手指从左向右滑动，确认每个卡片、列表项是否被单独识别，而不是整块读成“区域”
最容易被忽略的点是：即使你用了 <header> 和 <nav>，如果它们内部没有可聚焦元素（比如 <a> 缺 href，或 <button> 被 disabled 却没移除 tabindex），整个语义结构就形同虚设——AT 会跳过它，键盘用户也进不去。
