必须唯一且仅包裹核心内容，因为它是屏幕阅读器导航锚点，多实例或包含非主内容会导致跳转失败；section和article需按语义规范使用，滥用会污染大纲；图片、表单、nav、header等均须严格遵循可访问性标准。
为什么必须唯一且只包核心内容
<main></main>是辅助技术（如NVDA、VoiceOver）的导航锚点，不是视觉容器。用户按 M 键跳转时，屏幕阅读器只找第一个合法<main></main>；若页面中存在多个，或它包裹了广告、侧边栏、弹窗等非主内容，读屏工具要么跳过、要么定位错误——用户得手动听完整页才能找到正文。
常见错误包括：Next.js 布局组件里写一个<main></main>，子页面又渲染一个；<main></main>里塞了顶部 banner + 左侧菜单 + 内容区。
正确做法是全 DOM 中仅一个<main></main>，且只包含用户真正要操作/阅读的部分（如商品列表、表单主体、文章正文）。冗余<main></main>不增加字节大小，但会让辅助技术多做无效 DOM 遍历，拖慢语音导航响应。
section 和 article 的误用会污染文档大纲
<section></section>不是<div>的语义升级版，它是为「有标题的逻辑分段」准备的；<code><article></article>则代表可独立分发的内容单元。滥用会导致屏幕阅读器生成大量无意义导航节点，用户无法快速定位重点。
错误写法：<section><p>欢迎关注我们</p></section>（无标题、不可分发、无结构意义）。
判断标准：
- 这块内容是否自带
<h2></h2>–<h6></h6>？ - 能否被 RSS 抓取或邮件推送？
- 是否属于已有语义标签范畴（如页脚用
<footer></footer>）？
Google 会参考文档大纲（outline）评估内容权重，标题层级断裂或节点泛滥会弱化主内容识别。
图片和表单的语义缺失会触发重复 DOM 操作
缺失alt的<img>或未绑定<label></label>的<input>，表面看只是可访问性问题，实则常迫使开发者后期用 JS 补救——比如监听焦点事件手动播报提示、动态插入 ARIA 属性，这些额外逻辑会增加运行时开销和维护风险。
图片必须用<figure></figure>包裹，alt不可为空（装饰图除外），<figcaption></figcaption>必须存在且与<img>同级。
表单控件必须显式绑定：<label for="id"></label> 或嵌套写法：<label>邮箱<input type="email"></label>。
常见坑：
- 用 CSS 视觉对齐代替语义绑定；
- 把
title当aria-label用（title不被所有读屏支持）； - 在
<main></main>外堆了三个<h1></h1>，导致标题层级断裂。
nav 和 header 的容器误用让结构解析失效
<nav></nav>需包含真实导航链接，多个<nav></nav>时建议加aria-label="主导航"或aria-label="页脚链接"区分；<header></header>必须包裹站点标识或主标题，不能只当样式容器用——class="header"的<div>对可访问性零贡献。
<p><code><nav></nav>被误放在<aside></aside>或<footer></footer>里，<header></header>被嵌套进<section></section>或<main></main>中，都会导致辅助技术构建错误的导航树。
关键约束：
-
<main></main>不能嵌套在<section></section>或<article></article>内； -
<nav></nav>不应出现在<main></main>内部作为“次要导航”，除非明确标注aria-label； -
<header></header>若用于区块而非页面级，应配合<h2></h2>–<h6></h6>使用，避免与页面级<header></header>混淆。
最易被忽略的是组合动作：用了<nav></nav>却没确保其中链接可键盘聚焦，或用了<header></header>但没配<h1></h1>——语义标签本身不保安全，必须配合行为完整性才生效。
