必须唯一且只包核心内容，因其是屏幕阅读器按m键跳转的唯一导航锚点；多个或混入广告、侧栏等非主内容会导致跳转失败或定位错误，用户需手动遍历整页才能找到正文。

为什么

必须唯一且只包核心内容

是屏幕阅读器的导航锚点，不是视觉容器。按 M 键跳转时，辅助技术只认第一个合法的

；若页面中存在多个，或它包裹了广告、侧边栏、弹窗等非主内容，读屏工具要么跳过、要么定位错误——用户得手动听完整页才能找到正文。

常见错误包括：Next.js 布局组件里写一个

，子页面又渲染一个；

里塞了顶部 banner + 左侧菜单 + 内容区。

正确做法是全 DOM 中仅一个

，且只包含用户真正要操作/阅读的部分（如商品列表、表单主体、文章正文）。冗余

不增加字节大小，但会让辅助技术多做无效 DOM 遍历，拖慢语音导航响应。

如何用

和

替代无意义的

分组

没配

或aria-labelledby的

会被当成普通容器，丧失语义分组能力。屏幕阅读器无法识别其逻辑边界，用户在“跳区域”时会直接略过。

每个

应有明确主题，并以

作为首个子元素（或通过aria-labelledby关联标题）：

<section aria-labelledby="sec-features"><h2 id="sec-features">产品特性</h2>
  <p>支持多端同步...</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>
</section>

要点：

• 避免嵌套
  而无对应标题层级（比如

  里再套

  却不升级到

  ）

• 单个
  下子元素超 50 个（如长列表）时，滚动重排明显变慢；可拆成多个

  或改用DocumentFragment批量插入
• 用 Chrome DevTools 的 Elements 面板按 Ctrl+Shift+C 点击任意元素，看右下角 “Path” 深度，超过 html > body > main > section > article 这种 5 层结构就要警惕

什么时候该用

而不是

包裹表单组

一堆复选框或单选按钮堆在一起，光靠视觉分组没用——屏幕阅读器根本不知道它们是一组。必须用

包裹，并以

作为首个子元素提供语义标题。

常见错误：

• 写成普通文本或

  、模拟
• 漏掉
  闭合标签，导致后续元素被吞掉或结构错乱
• 嵌套
  但共用同一个

  ，造成语义混淆
• 组内只有单个控件（比如一个带说明的开关），却硬加
  ，反而增加冗余

不可替换，也不可省略；它是屏幕阅读器识别分组意图的唯一可靠信号。

为什么不能把广告硬塞进

适用于与当前内容强关联的补充信息（如文章侧边引用、术语解释），纯广告该用<div role="complementary">。 <p>原因很实际：</p> <ul> <li>搜索引擎和辅助技术会把<aside>内容视为“上下文相关”，强行塞广告会污染语义权重，影响 SEO 和语音导航逻辑</aside> </li> <li>某些读屏工具对<aside>有默认播报策略（如 NVDA 默认跳过未聚焦的<aside>），但广告又需要被感知——矛盾就来了</aside></aside> </li> <li>用<div role="complementary">更准确：它明确表示“这是辅助性内容”，既不干扰主流程，又保留在可访问性树中供用户主动探索 <p>真正降低过滤成本，不靠删减内容，而靠让每一块 HTML 都说清楚“我是什么、跟谁有关、要不要现在听”。一旦结构意图模糊，屏幕阅读器只能靠猜，用户就得替它补全逻辑——这才是最耗神的“过滤成本”。</p> </div> </li> </ul> </div>