角色地标

`banner`

全站标题地标 — 通常包含网站徽标、主导航和搜索框。顶层 <header> 元素会自动具有此角色。每个页面只允许有一个 banner。

何时使用

将 <header> 作为 <body>（或顶层片段中的 <html>）的直接子元素使用。当 <header> 处于顶层时，浏览器会自动将其暴露为 banner 地标。当 <header> 嵌套在 <article>、<section>、<main> 或 <aside> 内部时，它只是一个通用分组，而非地标。

仅在无法使用 <header> 的情况下，才应在 <div> 上使用 role="banner" — 例如在会剥离地标标签的 CMS 中。

每个页面最多只能有一个 banner。如果页面中存在第二个不属于全站横幅的头部（例如章节标题或评论线程标题），应将其嵌套在对应 section 内部，而不是放在顶层。

何时添加标签

如果页面中存在多个同类型地标（banner 较少见，navigation 较常见），请添加 aria-label 以加以区分。单个 banner 无需标签 — 屏幕阅读器会将其宣告为”banner”。

常见错误

页面顶部有多个 <header> 元素，每个都被提升为 banner 地标。屏幕阅读器用户在地标菜单中会看到两个”banner”条目，无法辨别哪个才是真正的页眉。
在嵌套于 <main> 或 <article> 内部的 <header> 上使用 role="banner"。该角色会覆盖默认的非地标行为，污染地标导航。
网站徽标放置在 <header> 之外，导致其不在 banner 地标的范围内。
将固定导航渲染为独立的 <div role="banner">，与原有的 <header> 并列 — 造成两个 banner。
Banner 内容为空（仅有装饰性边框）— 该地标仍会出现在屏幕阅读器导航中，但其中没有任何内容。

示例

<body>
  <header>
    <a href="/" aria-label="Disability World home">
      <img src="/logo.svg" alt="">
    </a>
    <nav aria-label="Primary">
      <a href="/toolkit/">Toolkit</a>
      <a href="/library/">Library</a>
    </nav>
  </header>
  <main>…</main>
</body>