ARIA：banner 角色

banner 角色用于定义全局站点页眉，通常包括徽标、公司名称、搜索功能，以及可能包含全局导航或标语。它通常位于页面顶部。

默认情况下，HTML 的 <header> 元素与 banner 路标具有相同的含义，除非它是 <aside>、<article>、<main>、<nav> 或 <section> 的后代，此时 <header> 公开 generic 角色，而不是站点范围的 banner 等价物。

描述

banner 路标角色会覆盖应用于其上的容器元素的隐式 ARIA 角色。它应保留用于通常位于每个页面顶部的全局重复站点范围内容。

banner 通常包括徽标或公司标识，或者可能是特定于站点的搜索工具，并且通常是您的营销团队所说的网站的“页眉”或“顶部 banner”。如果 header 元素 技术未用于该 banner，则应使用 role="banner" 声明来为辅助技术定义 banner 路标。

如果 header 元素是 body 元素 的后代，并且未嵌套在 article、aside、main、nav 或 section 子部分中，则辅助技术可以将页面的 header 元素识别为 banner。

每个页面可能都有一个 banner 路标，但每个页面通常应仅限于一个具有 banner 角色的元素。在包含嵌套 document 和/或 application 角色的页面中，每个嵌套的 document 或 application 角色也可能有一个 banner 路标。如果页面包含多个 banner 路标，则每个路标都应具有唯一的可访问名称。

关联的 ARIA 角色、状态和属性

无

键盘交互

无

必需的 JavaScript 功能

无

示例

这是一个带有跳至导航链接、徽标、标题和副标题的假简单 banner。由于这是网站的主要页眉，因此我们在容器元素中添加了 banner 路标角色。

html
<div role="banner">
  <a href="#main" id="skipToMain" class="skiptocontent">Skip To main content</a>
  <img src="images/w3c.png" alt="W3C Logo" />
  <h1>ARIA Landmarks</h1>
  <p>Identifying page subsections for easy navigation</p>
  <nav>…</nav>
</div>

我们也可以使用 HTML header 元素编写上述内容

html
<header>
  <a href="#main" id="skipToMain" class="skiptocontent">Skip To main content</a>
  <img src="images/w3c.png" alt="W3C Logo" />
  <h1>ARIA Landmarks</h1>
  <p>Identifying page subsections for easy navigation</p>
  <nav>…</nav>
</header>

最佳实践

虽然最好使用 header 元素并确保它不是页面任何子部分的后代，但有时您无法访问底层 HTML。如果是这种情况，您可以将 banner 角色添加到应作为 banner 公开的页面元素中，使用 JavaScript 实现。以这种方式识别页面的 banner 将有助于提高网站的可访问性。

规范

规范
可访问的富互联网应用程序 (WAI-ARIA)
# banner
未知规范

另请参阅