navigation

何时使用

使用 <nav>。该元素包裹一组导航链接——网站主导航、页内目录、面包屑、页脚链接、分页。每个 <nav> 都会被暴露为导航地标。

与 banner 和 main 不同，每页出现多个导航地标是正常且预期的。页眉有”主”导航，文章有”本页内容”导航，页脚有”网站地图”导航。

仅在无法使用 <nav>（如旧版 CMS）时，才在 <div> 上使用 role="navigation"。

并非所有”导航”行为都需要 nav。段落中间的三个链接只是文本——用 <nav> 包裹会产生噪音。将 <nav> 保留给用户真正用于导航的主要链接集合。

何时添加标签

当页面上有多个导航地标时（几乎总是如此），每个导航地标必须通过 aria-label 或 aria-labelledby 具有独特的无障碍名称。否则屏幕阅读器的地标菜单会显示三个”导航”条目，用户无法区分。

常用标签：「主导航」、「次导航」、「页脚」、「面包屑」、「分页」、「本页内容」、「跳转链接」。

常见错误

• 多个 <nav> 元素没有标签。在地标菜单中无法区分。
• 用 <nav> 包裹单个链接——过度使用；直接用 <a> 即可。
• aria-label="Navigation"——冗余。角色本已是”navigation”；屏幕阅读器会播报”导航，导航”。请使用有意义的标签，如”主导航”或”面包屑”。
• 主导航渲染为 role="menu" 或 role="menubar"。网站导航不是应用程序菜单——参见 menu 页面。
• 面包屑导航缺少 aria-label="Breadcrumb"。惯例要求添加标签以便识别该角色。

示例

<header>
  <nav aria-label="主导航">
    <a href="/toolkit/">工具包</a>
    <a href="/library/">资源库</a>
  </nav>
</header>

<nav aria-label="面包屑">
  <ol>
    <li><a href="/">首页</a></li>
    <li><a href="/toolkit/">工具包</a></li>
    <li aria-current="page">标准</li>
  </ol>
</nav>