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
未知规范

另请参阅