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 地標示例