角色地标

`main`

主内容地标 — 页面的主要内容区域，不包含重复出现的页眉、导航和页脚。<main> 元素会自动具有此角色。每个页面只允许有一个 main。

何时使用

使用 <main> 元素。它是页面上最重要的单一地标 — 屏幕阅读器用户通常会首先跳转到 main，以跳过导航和页眉。

仅在无法使用 <main> 的情况下，才应在 <div> 上使用 role="main" — 主要见于 CMS 的限制场景。两种形式都必须满足同一规则：每个页面只能有一个 main。出现多个 main 会破坏”跳转到主内容”的功能，且许多屏幕阅读器只会暴露第一个。

main 地标应包含当前页面所有独有的内容，不应包含网站页眉、主导航或页脚。请将这些部分放在 <header>、<nav> 和 <footer> 兄弟元素中，而不是放在 <main> 内部。

何时添加标签

单个 main 无需标签 — 屏幕阅读器会将其宣告为”main”。仅在页面存在多个 main 时（本不应如此），或出于某种原因需要在单页应用（SPA）中区分当前与之前的主内容区域时，才添加 aria-label。

“跳转到主内容”链接应指向 <main id="main">（或您为其指定的任意 id），并在页面顶部使用 <a href="#main"> — 这是 WCAG 2.4.1 的绕过块技术。

常见错误

同一页面存在两个 <main> 元素。最常见的原因：单页应用在未移除旧视图 <main> 的情况下内联了新视图的 <main>。
页面完全缺少 <main> 元素。屏幕阅读器用户无法跳过页眉。
<main> 嵌套在 <header> 或 <footer> 内部。地标层级结构错误。
将全站导航置于 <main> 内部。导航在各页面重复出现，因此应属于 <header>/<nav>，而非页面独有内容。
“跳转到主内容”链接指向了不存在的 id。

示例

<body>
  <a href="#main" class="visually-hidden focus-visible">Skip to main content</a>
  <header>…</header>
  <main id="main">
    <h1>Why one main landmark per page</h1>
    <p>…</p>
  </main>
  <footer>…</footer>
</body>