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