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
未知規範

另請參閱