ARIA：導航角色

navigation 角色用於識別用於瀏覽網站或頁面內容的主要連結組。

html
<div role="navigation" aria-label="Main">
  <!-- list of links to main website locations -->
</div>

這是網站的主導航。

描述

navigation 角色是地標角色。地標角色提供了一種識別網頁組織和結構的方法。透過對頁面部分進行分類和標記，以程式設計方式表示透過佈局視覺傳達的結構資訊。螢幕閱讀器使用地標角色為頁面重要部分提供鍵盤導航。與 HTML <nav> 元素一樣，導航地標提供了一種識別旨在用於網站或頁面內容導航的連結組（例如列表）的方法。如果頁面包含多個導航地標，則每個地標都應具有唯一的標籤。如果頁面上的兩個或多個導航地標具有相同的連結集，則為每個地標使用相同的標籤。

最好使用 HTML5 <nav> 元素 來定義導航地標。如果未使用 HTML5 nav 元素技術，請使用 role="navigation" 屬性來定義導航地標。

注意：使用 <nav> 元素將自動傳達某個部分具有 navigation 的角色。開發人員應始終優先使用正確的語義 HTML 元素，而不是使用 ARIA

關聯的 WAI-ARIA 角色、狀態和屬性

aria-label

簡要描述導航的目的，省略“導航”一詞，因為螢幕閱讀器會同時讀取角色和標籤的內容。

鍵盤互動

無。

所需的 JavaScript 功能

無。

示例

html
<div role="navigation" aria-label="Customer service">
  <ul>
    <li><a href="#">Help</a></li>
    <li><a href="#">Order tracking</a></li>
    <li><a href="#">Shipping &amp; Delivery</a></li>
    <li><a href="#">Returns</a></li>
    <li><a href="#">Contact us</a></li>
    <li><a href="#">Find a store</a></li>
  </ul>
</div>

可訪問性問題

地標角色 旨在謹慎使用，以識別文件中更大的整體部分。使用過多的地標角色可能會在螢幕閱讀器中產生“噪音”，從而難以理解頁面的整體佈局。

最佳實踐

優先使用 HTML

使用 <nav> 元素將自動傳達某個部分具有 navigation 的角色。如果可能，請優先使用它。

標記地標

多個地標

如果文件中存在多個 navigation 地標角色或 <nav> 元素，請為每個地標提供標籤。此標籤將使使用者能夠快速瞭解每個地標的目的。

html
<div id="main-nav" role="navigation" aria-label="Main">
  <!-- content -->
</div>

…

<nav id="footer-nav" aria-label="Footer">
  <!-- content -->
</nav>

重複的地標

如果文件中的 navigation 地標角色或 <nav> 元素在文件中重複，並且兩個地標的內容相同，則為每個地標使用相同的標籤。例如，在頁面頂部和底部重複主導航。

html
<header>
  <nav id="main-nav" aria-label="Main">
    <!-- list of links to main website locations -->
  </nav>
</header>

…

<footer>
  <nav id="footer-nav" aria-label="Main">
    <!-- list of links to main website locations -->
  </nav>
</footer>

冗餘描述

螢幕閱讀器會宣佈地標的角色型別。因此，您無需在標籤中描述地標是什麼。例如，role="navigation" 和 aria-label="Primary navigation" 的宣告可能會被冗餘地宣佈為“主要導航導航”。

規範

規範
可訪問的富網際網路應用程式 (WAI-ARIA)
# navigation
未知規範

另請參閱