main标签必须且只能出现一次，多个会导致屏幕阅读器无法准确定位主内容、Lighthouse报duplicate-main错误，WCAG 2.1明确要求“one main landmark per page”，应通过开发者工具搜索验证唯一性。

main标签必须且只能出现一次

页面中存在多个

是最常见也最致命的错误。浏览器不会报错，但屏幕阅读器（如 NVDA、VoiceOver）会把

当作“按 M 键直达主内容”的唯一锚点——多个就等于没有锚点。Lighthouse 或 axe 工具会直接标红 duplicate-main，WCAG 2.1 也明确要求“one main landmark per page”。

实操建议：

• 用浏览器开发者工具（F12 → Elements 面板），Ctrl+F / Cmd+F 搜索
  ，确认全文仅匹配一个开始标签和一个结束标签
• 特别注意 SPA 场景：React/Vue 组件里别各自写
  {children}
  ；应只由顶层路由容器包裹一次，子组件用
  或普通
• 服务端模板（如 EJS、Twig）中，避免列表页和详情页共用同一套
  包裹逻辑，导致渲染出嵌套或并列的多个

main不能嵌套在header、footer、nav等语义元素内

的父元素必须是 ，不能是
、
、
、
或
。这些元素本身已有明确语义边界，再往里塞
就像在“目录”里再标一个“全书主干”，逻辑冲突。

实操建议：

• 检查
  的直接父节点：右键 → “Reveal in Elements panel”，看它是否直属于
• 若发现被包在
  下（比如误把文章标题区块当网站头部），需整体剪切
  并粘贴到 层级，与
  、
  等同级并列
• 可以作为
  的子元素存在，但仅限“本页专属标题与元信息”，例如博客正文前的
  和发布时间，不是整个网站的 Logo + 全局导航

main里只能放当前页面独有、不可复用的内容

不是视觉居中那块，也不是最重要的那块，而是“去掉页眉、页脚、侧栏、面包屑、登录框之后剩下的那部分”。判断标准很实在：如果这块内容复制粘贴到另一个页面还能原样用，那它就不该进
。

HTML设计工具专业版
企业级HTML/CSS设计系统,支持设计令牌、组件库、批量生成、主题切换与团队协作,适合团队与商业项目。
下载

实操建议：

• 逐行审查
  内部：看到
  、
  、
  、含 role="navigation" 的容器，立刻剪出去
• 首页的“热门推荐”区块容易误判——若它随路由变化主题（如从“科技新闻”切到“本地活动”），才可纳入；否则只是通用模块，改用
• 允许放进
  的典型内容：
  （单篇博文）、
  （商品列表）、
  （独立提交表单）、纯文本段落；禁止放入版权信息、全局搜索框、多页一致的侧边广告位

必须配 aria-label 或 aria-labelledby 才算真正生效

光写

不够。旧版读屏工具（尤其某些国产辅助软件）可能忽略其语义，除非你显式提供可访问性标签。W3C 推荐但不强制，但实际项目中不加就等于没用。

实操建议：

• 给
  加 aria-labelledby="main-title"，并在内部或附近放一个带对应 id="main-title" 的标题元素（如

  最新动态

  ）
• 若无显式标题，用 aria-label="页面主要内容区域" 也可，但不如 aria-labelledby 精准
• 最后务必用 Lighthouse 运行无障碍审计，确认 “Main landmark is unique” 通过，且 no duplicate-main 报错
标签的语义边界非常刚性：它不处理样式、不参与布局、不替代 div，只回答一个问题——“用户打开这个 URL，真正想看的是哪一块？”答错，机器就找不到；答对了，还得靠 aria 属性让老工具也认得出来。