感謝觀看 Google I/O 大會！立即觀賞隨選內容。

頁面的目錄是另一種區域導覽。網頁包含網站上每個網頁的階層式連結，稱為網站地圖。網站頂層頁面的導覽 (可能出現在每個頁面上) 稱為全域導覽。全域導覽的顯示方式有很多種，包括導覽列、下拉式選單和飛出式選單。視可視區域大小而定，同一個網站可能會以不同方式顯示全域導覽。

請務必確保使用者能以最少的點擊次數前往網站上的任何網頁，同時確保導覽功能直覺易用，不會造成混淆。不過，導覽元素沒有特定規定，MachineLearningWorkshop.com 是單頁式網站，右上角有本地導覽列，多頁式網站通常會將全域導覽放在這裡。

Learn HTML 的「導覽」模組。 — 如果您在 web.dev 上造訪這個頁面，會看到一些導覽功能。標題上方有麵包屑，以及「瞭解 HTML」目錄，視畫面寬度而定，還會有「本頁內容」目錄。

「Skip to content」(跳至內容) 連結

有些網站會提供「跳至內容」連結，通常是焦點順序中的第一個元素。畫面可能如下所示：

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

當使用者點選或將焦點移至這個元素，然後按下 Enter 鍵時，系統會捲動網頁，並將焦點移至具有 main ID 的元素，這應該是主要內容。

<main id="main">

為提升可用性和無障礙程度，請務必讓使用者略過每個網頁上重複的內容區塊，例如共用的標題和主要導覽項目。有了跳轉連結，鍵盤使用者按下 tab 鍵時，就能快速前往網頁上的新內容。這樣一來，使用者就不必在龐大的選單中逐一按 Tab 鍵。

大多數設計師不喜歡在頁面頂端顯示這類連結，隱藏該連結即可。不過請注意，當連結成為焦點時 (鍵盤使用者在頁面上按 Tab 鍵瀏覽連結時)，連結必須對使用者可見。

請只在非焦點和非使用中狀態下，使用類似 .visually-hidden:not(:focus):not(:active) 的選取器隱藏內容。

與所有連結文字一樣，名稱應清楚指出連結會將使用者帶往何處。連結目標應為網頁主要內容的開頭。

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

避免變更分頁順序

目錄可能會顯示在標題後方、較小的螢幕上，或是靠右對齊的側欄中。如果包含兩組相同的導覽，但只顯示一組，就是反模式。

我們使用 CSS，在寬度超過 1254 像素的頁面上，將導覽顯示為側邊欄。

使用者習慣內容會隨著裝置變更或字型大小增加而調整位置，但他們不希望這麼做時，索引標籤順序也會隨之變更。網頁版面配置應易於存取、可預測，且在整個網站中保持一致。目錄的位置無法預測。

網頁導覽標記

導覽標記提供次要導覽功能，協助使用者瞭解自己在網站上的位置。導覽標記通常會指出目前文件的網址階層，以及目前網頁在網站結構中的位置。

從使用者角度來看，網站結構可能與伺服器上的檔案結構不同，這很正常。使用者不必瞭解檔案的整理方式，但必須能夠瀏覽內容。

麵包屑可讓使用者瞭解網站的架構。這有助於使用者透過 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」模組頁面都有相同的導覽標記，顯示 web.dev Learn 部分中 HTML 課程的階層。

程式碼應如下所示：

<nav aria-label="breadcrumbs">
  <ol role="list">
    <li>
      <a href="/">web.dev</a>
    </li>
    <li>
      <a href="/learn">Learn</a>
    </li>
    <li>
      <a href="/learn/html">HTML</a>
    </li>
  </ol>
</nav>

<nav> 元素是地標角色，可告知輔助技術將導覽標記顯示為網頁上的導覽元素。aria-label 提供的「麵包屑」無障礙名稱可區別這個導覽與同一份文件中的其他導覽地標。

每個連結之間都有內容分隔符。這些分隔符號可使用 CSS 產生，顯示在每個清單項目之前 (從第二個項目開始)。

[aria-label^="breadcrumbs" 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
}

螢幕閱讀器「看不到」這些圖示，這是最佳做法。螢幕閱讀器應隱藏麵包屑連結之間的分隔符。此外，這些元素與背景的對比度也必須足夠，與網頁上的其他文字和視覺元素相同。

我們的範例程式碼使用排序清單，因為項目會列舉出來，所以比未排序清單更合適。新增 role="list" 是因為部分 CSS 顯示屬性值會移除某些元素的語意。

一般來說，導覽標記中的首頁連結應顯示「首頁」，而非網站名稱或網站標誌。由於麵包屑位於文件頂端，因此使用這種反模式是合理的。

目前頁面「Navigation」不會顯示在麵包屑中。

目前頁面

如果目前網頁包含在麵包屑中，文字最好不要是連結，且 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」中各節的連結。這些連結和篩選器列就是位置導覽。

如果透過行動裝置造訪這個網站，或是使用較窄的螢幕，載入這個頁面時側欄會隱藏。你可以透過頂端導覽列中的存取。

寬螢幕上的永久本機導覽與窄螢幕上的本機導覽主要差異在於，前者有返回主要頂端導覽的箭頭，後者則會關閉導覽。

這份文件的連結與當地導覽中的其他連結看起來相同。不過，這個連結的外觀可能與其他連結略有不同，向有視力的使用者指出這是目前頁面。這項視覺差異應使用 CSS 建立。

您也可以使用 aria-current="page" 屬性識別目前網頁。這會告知輔助技術，連結指向目前網頁。

理想情況下，區域導覽中這個清單項目的 HTML 應類似下列內容：

<li>
  <a aria-current="page" aria-selected="true" href="/learn/html/navigation">
    Navigation
  </a>
</li>

全域導覽

全域導覽會連往網站的頂層網頁，且網站的每個網頁都相同。網站的全域導覽也可能包含分頁，開啟後會顯示巢狀連結清單，連結至網站的所有子區段或其他選單。可能包括有標題的部分、按鈕和搜尋小工具。這些額外功能並非必要。您只需要確保每個頁面都顯示導覽列，且每個頁面的導覽列都相同，當然，指向目前頁面的任何連結都必須顯示 aria-current="page"。

全域導覽提供一致的方式，讓使用者在應用程式或網站中隨處移動。Google 網站的網頁頂端沒有全域導覽列。Yahoo! 確實會這麼做。雖然所有主要的 Yahoo! 資源都有不同的樣式，但大多數部分的內容相同。

新聞和體育全球導覽標題的內容相同。不過，即使是視力正常的使用者，也無法清楚辨識顯示使用者位於運動頁面的圖示。這兩個部分都有全域導覽，下方則是各部分的專屬區域導覽。

與全域導覽類似，所有頁面的頁尾都應相同。但這也是兩者唯一的相似之處。全域導覽可從產品角度導覽至網站的所有部分。頁尾中的導覽元素沒有特定規定。

一般來說，頁尾會包含公司連結，例如法律聲明、公司簡介、職缺頁面，以及相關外部來源的連結，例如社群媒體。

這個頁面的頁尾包含兩組導覽元素：一組三欄的相關 web.dev 導覽，以及一組獨立的 Google 條款和隱私權導覽。頁尾導覽包含如何為 web.dev 貢獻內容、web.dev 團隊提供的相關內容，以及外部社群媒體連結。

接下來，我們將探討如何標記資料表。

隨堂測驗

測試您對導覽的瞭解程度。

哪個元素是用來標記網站的主要導覽？

<navigation>

請再試一次。

<breadcrumb>

請再試一次。

<nav>

答對了！

一個網頁上可以有多個導覽元素嗎？

不正確。

請再試一次。

正確。

答對了！

導航 透過集合功能整理內容 你可以依據偏好儲存及分類內容。

「Skip to content」(跳至內容) 連結

目錄

避免變更分頁順序

網頁導覽標記

目前頁面

區域導覽

全域導覽

隨堂測驗

導航