ARIA: banner 角色

描述

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

Banner 通常包含 logo 或公司标识，或可能是一个特定于网站的搜索工具，通常是你的营销团队所说的网站的“页眉”或“顶部横幅”。如果 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，包含一个跳至导航链接、一个 Logo、一个标题和一个副标题。由于这是网站的主要页眉，我们将 banner 地标角色添加到了容器元素上。

<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 元素来编写上面的内容

<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> 元素将自动传达该元素具有 banner 的角色。如果可能，请优先使用语义化的 <header> 元素，而不是 banner 角色。

虽然最好使用 header 元素并确保它不是页面任何子部分的后代，但有时你无法访问底层 HTML。在这种情况下，你可以使用 JavaScript 将 banner 角色添加到应该暴露为 banner 的页面元素上。以这种方式标识页面的 Banner 将有助于提高网站的可访问性。

规范

另见

• HTML header 元素
• WC3 地标示例