感谢您关注 Google I/O 大会！观看点播内容。

此页面由 Cloud Translation API 翻译。

导航元素分为多种类型，它们的显示方式也有多种。文本中的已命名定位点，该定位点链接到其他网页系统会将同一个网站视为本地导航。由一系列链接构成的本地导航，这些链接显示了相对于网站结构的当前网页，或者用户为了到达当前网页而遵循的网页，称为路径。网页的目录是另一种类型的本地导航。包含指向网站上每个页面的分层链接的页面称为网站地图指向网站顶级页面的导航部分（位于每个页面上）称为全局导航。全局导航可以通过多种不同的方式显示，包括导航栏、下拉菜单和浮出菜单。同一网站可能会以不同的方式显示其全局导航，具体取决于视口大小。

始终确保用户可以通过最少的点击转到您网站上的任何网页，同时确保导航功能非常直观，不会让您感到无所适从。也就是说，对导航元素没有特定要求。MachineLearningWorkshop.com，为单页网站，右上角有本地导航栏；这就是多页网站通常会放置全球导航元素的位置。

此页面的头版，包括顶部的面包屑导航、用于显示此页面目录的按钮，以及系列的本地导航。

当您在 web.dev 上查看此页面时，会发现一些导航功能。标题上方有一个面包屑导航 “在此页面上”一个目录，以及“学习 HTML”根据屏幕宽度显示目录可以一直显示，也可以在用户点击菜单按钮后显示。网页上的第一个元素是指向 #main 的隐藏链接，可让您跳过边栏和路径链接。

“跳至内容”链接

网页上的第一个元素是内部链接：

<a href="#main" class="skip-link button">Skip to main</a>

当用户点击该 activity 时，或者当它具有焦点并且用户点击 Enter 时，它会滚动页面并将焦点放在主要内容上： id 为 main 的地标 <main>：

<main id="main">

即使您已阅读了前面的所有部分，也可能从未在此网站上看到过该链接。它仅在获得焦点时显示：

为了提高易用性和无障碍性，请务必让用户绕过每个页面上重复的内容块。系统包含跳过链接，因此当键盘用户在加载网页时点击 tab 时，可以快速跳转到网站的主要内容，从而避免必须切换大量关联在此页面中，“跳过”链接会跳过整个版块的边栏导航和面包屑导航，将用户直接转到网页标题。

大多数设计人员都不喜欢在网页顶部显示链接。可以在记住链接的同时从视图中隐藏链接当键盘用户按 Tab 键浏览页面上的链接时，链接会变为焦点，此时该链接必须对所有用户可见。仅使用类似于 .visually-hidden:not(:focus):not(:active) 的选择器隐藏处于非聚焦状态和非活跃状态的内容。

链接文字为“跳到主页面”。这是该链接的可访问名称。这是一个技术网站，用户可能知道“主要”网址。与所有链接文字一样，无障碍名称应清楚地指明链接将用户定向到何处。链接目标应是页面的主要内容。要测试这一点，请在网页加载时按 Tab 键转到“跳至主要位置”链接。然后按 Enter 以确保其“跳跃”放在主要内容上

“跳至内容”链接可将主要内容滚动到用户视野范围内。第一个元素是 <h1> 标题，其标题为此部分的标题。在此示例中为 <h1>Marking up navigation</h1>。主标题后面跟着宣传口号，即对该内容的简要说明教程。目录导航是在代码库中的标题之前还是之后显示的取决于浏览器的宽度。

在较窄的屏幕上，目录会隐藏在“此页面”按钮的后面，用于切换导航栏的可见性。 — 在较窄的屏幕上，目录隐藏在“此页面”按钮的后面，用于切换导航的可见性。

。 <ph type="x-smartling-placeholder">

在宽屏设备上，目录始终可见，并且指向当前章节的链接会突出显示为蓝色。 — 在宽屏设备上，目录始终可见，并且指向当前部分的链接会以蓝色突出显示。

如果浏览器宽度超过 80em，则目录位于标记中的标题之前，类似于以下内容（移除了类名称以简化标记）：

<nav aria-label="On this page">
  <div>On this page</div>
  <div>
    <ul>
      <li>
        <a href="#skip">Skip to content link</a>
      </li>
      <li>
        <a href="#toc">Table of contents</a>
      </li>
      <li>
        <a href="#bc">Page breadcrumbs</a>
      </li>
      <li>
        <a href="#ln">Local navigation</a>
      </li>
      <li>
        <a href="#global">Global navigation</a>
      </li>
    </ul>
  </div>
</nav>

<nav> 是最适合用于导航部分的元素：它会自动通知屏幕阅读器和搜索引擎某个部分具有地标角色 navigation。

添加 aria-label 属性用于简要说明导航的用途。在这种情况下，因为该属性的值对于网页上的文字，最好使用 aria-labelledby 以引用可见文本。

我们可以将非语义 <div> 更改为段落 <p>，然后添加 id 以供引用。然后，我们使用 aria-labelledby：

<nav aria-labelledby="tocTitle">
  <p id="tocTitle">On this page</p>

除了减少冗余之外，翻译服务会翻译可见文本，而属性值可能不会翻译。如果可能，如果存在可提供适当标签的文本，优先使用此类文本，而非属性文本。

此导航就是目录。如果您想使用 aria-label，请提供该信息，而不是重复显示可见文本：

<nav aria-label="Table of Contents">
  <p>On this page</p>

在元素上提供无障碍名称时，请不要包含该元素的名称。屏幕阅读器向用户提供该信息。例如，使用 <nav> 元素时，不要添加“navigation”；将使用语义元素时包含的信息。

这些链接本身位于一个无序列表中。虽然您不必嵌套在列表中，但使用列表可让屏幕阅读器用户知道列表项（因此链接）是导航中的单个列表。

<nav aria-labelledby="tocTitle">
  <p id="tocTitle">On this page</p>
  <ul role="list">
    <li>
      <a href="#skip">Skip to content link</a>
    </li>
    <li>
      <a href="#toc">Table of contents</a>
    </li>
    <li>
      <a href="#bc">Page breadcrumbs</a>
    </li>
    <li>
      <a href="#ln">Local navigation</a>
    </li>
    <li>
      <a href="#global">Global navigation</a>
    </li>
  </ul>
</nav>

如果您的浏览器宽度不足 80em，微件位于标题和宣传口号下方。为此，只需添加两个目录导航组件，并根据媒体查询使用 CSS display: none; 隐藏其中一个组件。

添加两个相同的 widget 而只显示一个 widget 是一种反模式。这些额外的字节可以忽略不计。正在从以下位置隐藏 HTML 内容：所有用户均可使用 CSS display: none。问题在于，在宽屏设备上，目录位于 #main 之前；在较小的屏幕上，目录会嵌套在 #main 中。使用键盘跳至内容即跳过内容。而用户已习惯于在更换设备或因此当他们这样做时，他们不希望制表符顺序发生变化。页面布局应易于访问、可预测、并且在整个网站上保持一致在该示例中，目录的位置是不可预测的。

网页面包屑导航

面包屑导航提供次级导航，帮助用户了解他们所处的网站位置。通常会显示网址层次结构以及当前页面在网站结构中的位置。用户视角的网站结构可能会有所不同从服务器上的文件结构中移除没关系。用户不需要知道您如何整理文件，但他们需要能够浏览内容

面包屑导航可帮助用户浏览并了解您网站的组织结构，从而能够快速导航到任意祖先实体的任意位置部分，而不必使用 back 功能返回之前访问过的每个网页，从而到达当前网页。

如果网站采用简单的层次结构目录结构（如 web.dev），则通常由路径导航组成指向主目录或主机名的链接，该网址的路径名中带有指向每个目录的索引文件的链接。加入为可选内容，需要额外注意一些事项。

const url = new URL("https://web.dev/learn/html/navigation");
const sections = url.hostname + url.pathname.split('/');
// "web.dev,learn,html,navigation"

面包屑导航的各部分显示了从当前网页返回首页的路径，以及介于两者之间的每个层级。

指示当前网页路径的路径。

每个“学习 HTML”模块页面都采用相同的面包屑导航导航，显示了 HTML 课程在 web.dev的“learn”部分。代码类似于以下内容，为清楚起见，移除了类和 SVG 详情：

<nav aria-label="breadcrumbs">
  <ul role="list">
    <li>
      <a href="/">
        <svg aria-label="web.dev" role="img">
          <use href="#webDevLogo" />
        </svg>
      </a>
    </li>
    <li>
      <a href="/learn">Learn</a>
    </li>
    <li>
      <a href="/learn/html">Learn HTML!</a>
    </li>
  </ul>
  <share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
    <svg aria-label="share" role="img">
      <use href="#shareIcon" />
    </svg>
    <span>Share</span>
  </share-action>
</nav>

此面包屑导航遵循最佳做法。它使用地标角色 <nav> 元素，因此辅助技术将面包屑导航作为网页上的导航元素呈现。 “面包屑导航”的无障碍名称随 aria-label 一起提供，可将其与当前文档中的其他导航地标区分开来。

链接之间具有 CSS 生成的内容分隔符。分隔符位于每个列表项之前，以第二个 <li> 开头。

[aria-label^="breadcrumb" i] li + li::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  rotate: 45deg;
  opacity: .8
}

屏幕阅读器不会“看到”它们，这是最佳做法：应向屏幕阅读器隐藏面包屑导航链接之间的分隔符。此外，与常规文本一样，它们必须与背景具有足够的对比度。

此版本使用了无序列表和列表项。最好使用有序列表，因为枚举了有序列表项。此外，它还是一个列表：由于某些 CSS 显示属性值移除了某些元素的语义，因此重新添加了 role="list"。

通常，路径中指向首页的链接应为“首页”而不能是将网站名称作为标签。但是，由于面包屑导航位于文档顶部，并且是页面上仅有的徽标，因此有必要为什么使用这种反模式

最后一个元素是自定义 <share-action> 元素。第 15 节介绍了自定义元素。而此自定义元素不是面包屑导航的一部分，可以在 <nav> 中包含不相关的元素，只要包含的内容在所有网页上保持一致即可。

当前页面

在此页面中，当前页面（即“导航”）不包含在路径中。当前网页包含在面包屑导航，其中的文字最好不是链接，并且 aria-current="page" 应包含在当前网页的。如果使用此参数，最好指明后面的标题是带有图标或其他符号。

如果设计发生更改，可以使用面包屑导航的替代版本：

<nav aria-label="breadcrumbs">
  <ol role="list">
    <li>
      <a href="/">Home</a>
    </li>
    <li>
      <a href="/learn">Learn</a>
    </li>
    <li>
      <a href="/learn/html">Learn HTML!</a>
    </li>
    <li aria-current="page">
      Navigation
    </li>
  </ol>
</nav>

面包屑导航不适用于线性步骤。例如，用户到达当前页面所经由的食谱中到目前为止的步骤列表可以嵌套在 <nav> 中，但不应标记为面包屑导航。

本地导航

此页面上有另一个导航组件。如果您使用的是宽屏设备，那么屏幕左侧会有一个边栏 “学习 HTML”徽标、搜索栏以及指向“学习 HTML”中 20 个部分各部分的链接。每个链接都包含章节编号版块标题，以及您之前访问过的版块右侧的对勾标记 - 如果您离开后又回来，可能就是这个版块。指向“了解 HTML”中所有部分的链接，以及搜索和本地标头就是位置导航。

如果您是通过平板电脑或移动设备访问该网站，或者使用设备的屏幕较窄，那么，当您加载此页面时，边栏会处于隐藏状态。您可以通过顶部导航栏中的汉堡式菜单使其可见（是的，标题是设置了 role="navigation" 的自定义 <web-header> 元素）。

宽屏设备上的永久本地导航与可以出现和消失的窄屏设备上的本地导航之间的主要区别在于，在可隐藏的版本上显示关闭按钮。此图标通过 display: none; 在宽屏设备上隐藏。

本地导航功能会在本章节名称旁边显示一个对勾标记。

指向此文档的链接（第 010 部分）的外观与本地导航中的其他链接略有不同，可向视力正常的用户表明这是当前网页。这种视觉差异是通过 CSS 实现的。系统还会使用 aria-current="page" 属性标识当前网页。这会告知辅助技术它是指向当前页面的链接。此本地导航中此列表项的 HTML 类似于以下内容：

<li>
  <a aria-current="page" href="/learn/html/navigation" data-complete="true">
    <span>010</span>
    <span>Navigation</span>
    <svg aria-label="Check" role="img">
      <use href="#checkmark" />
    </svg>
  </a>
</li>

如果这不是您第一次访问该页面，则不会看到复选标记。如果您以前访问过此网页， data-complete 自定义属性设置为 true，系统将显示对勾标记。带有对勾标记，但 CSS 会使用 display: none（由于缺少 data-complete="true" 属性和值：

.course .stack-nav a:not([data-complete="true"]) svg {
  display: none;
}

当 display 设置为 none 以外的值时，role 会告知辅助技术内嵌 SVG 是图片。 aria-label 充当 <img> 上的 alt 属性。

全局导航

全局导航是指向网站顶级页面（在网站的每个页面上都相同）的导航部分。网站的全局导航也可能由标签页组成，这些标签页打开的链接嵌套列表指向网站的所有子部分或其他菜单。它可能包含带标题的版块、按钮和搜索微件。这些附加功能并非强制性要求。需要注意的是导航元素会显示在每个页面上，并且在每个页面上都相同；当然，任何指向当前页面的链接上都带有 aria-current="page"。

全球导航可在应用或网站中的任何位置提供一致的出行方式。Google 没有全球制度导航栏。新版 Search Ads 360用途。虽然所有主要的 Yahoo!属性具有不同的样式，大部分内容都是相同的

新闻和体育这两个全球导航标题的内容相同，体育运动中没有足够的对比度，使之难以看清；（即使是低视力访问者也可使用）。这两个部分都有一个全局并在其下方显示针对特定版块的本地导航。

与全局导航类似，所有页面的页脚都应相同。但这是唯一的相似之处。全局导航让用户可以从产品的角度访问网站的所有部分。页脚中的导航元素没有特定要求。一般来说，页脚会包含公司链接，例如关于公司和职业生涯的法律声明，并且可能会指向外部例如社交媒体图标。

此页面的页脚包含另外三个 <nav> 元素：页脚导航、Google 开发者、条款和政策。每个元素都是一个链接页脚导航栏包含如何为 GitHub 上的 web.dev 贡献内容，以及由除 web.dev 之外的 Google，以及外部“如何连接”链接。

<footer> 中的这三个导航是 <nav> 元素，其 aria-label 为这些地标角色提供了可访问的名称。我们看到的所有导航都是嵌套在导航栏内的列表中的链接。我们已经介绍了创建您自己的导航需要了解的所有内容。接下来，我们将了解如何标记数据表。

检查您的理解情况

测试您对导航相关知识的掌握情况。

哪个元素用于标记网站的主导航栏？

<navigation>

请重试。

<breadcrumb>

请重试。

<nav>

正确！

一个网页上可以有多个导航元素吗？

错误。

请重试。

正确。

正确！