ARIA: navigation role

描述

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

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

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

aria-label

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

鍵盤互動

無。

所需的 JavaScript 功能

無。

示例

<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>

可訪問性考慮

地標角色 intended to be used sparingly, to identify larger overall sections of the document. Using too many landmark roles can create "noise" in screen readers, making it difficult to understand the overall layout of the page.

最佳實踐

優先使用 HTML

使用 <nav> 元素將自動傳達該元素具有 navigation 角色。如果可能，請優先使用語義 <nav> 元素而不是 navigation 角色。

標記地標

多個地標

如果文件中有一個以上的 navigation 地標角色或 <nav> 元素，請為每個地標提供一個標籤。此標籤將允許輔助技術使用者能夠快速瞭解每個地標的目的。

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

…

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

重複的地標

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

<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" 的可能會被冗餘地播報為“primary navigation navigation”。

規範

另見

• The <nav> element
• 使用 HTML 章節和大綱
• 使用 WAI-ARIA 地標 – 2013 | The Paciello Group
• 可訪問的地標 | scottohara.me
• Semantic navigation with the nav element | HTML5 Doctor