導航

如同您在「連結」一文中所學，含有 href 屬性的 <a> 元素會建立連結，讓使用者透過點選或輕觸來追蹤。在「清單」一文中，您已瞭解如何建立內容清單。在本單元中，您將瞭解如何將連結清單分組，以建立導覽功能。

導覽有幾種類型，且可透過多種方式顯示。文字中連結至同一網站內其他網頁的命名錨定標記，視為本機導覽。當本地導覽包含一系列連結，顯示目前網頁的階層與網站結構相關，或是使用者沿著這些網頁前往目前網頁時，就稱為導覽標記。

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

請務必確保使用者可以透過最少的點擊次數前往網站上的任何網頁，同時確保導覽介面直覺易懂，不會過於繁雜。不過，導覽元素並沒有特定規定。MachineLearningWorkshop.com 是單頁網站，因此在右上方設有本地導覽列，這是多頁網站通常放置全域導覽列的位置。

「跳至內容」連結

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

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

當使用者點選或將焦點移至此元素，並按下 Enter 時，系統會捲動網頁，並將焦點移至具有 main ID 的元素 (可能是主要內容)。

<main id="main">

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

大多數設計師都不喜歡在頁面頂端顯示這類連結。您可以隱藏該連結。不過，請注意，當連結獲得焦點時 (也就是使用者透過鍵盤在頁面上瀏覽連結時)，連結必須對使用者可見。

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

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

目錄

主要內容的第一個元素是 <h1> 標題，其中包含此頁面的標題：<h1>Navigation</h1>。主要標題後方會簡短說明本教學課程的內容。

在較小的螢幕上，目錄會顯示在標題之後。在較大的螢幕上，顯示在靠右對齊的側欄中。

<nav> 是用於導覽區段的最佳元素。它會自動通知螢幕閱讀器和搜尋引擎，某個區塊的角色為 navigation，也就是地標角色。

請加入 aria-label 屬性提供導覽用途的簡短說明。在這種情況下，該屬性的值會與「On this page」文字重複。如要參照可見文字，請改用 aria-labelledby。

使用 id 時，可能會如下所示：

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

除了減少重複內容，可見文字也會由翻譯服務翻譯，但屬性值可能不會。如果有適當的標籤文字，請盡可能使用該文字，而非屬性文字。

「本頁內容」導覽是指目錄。如要使用 aria-label，請提供該內容，而不要重複顯示的文字：

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

如要在元素上提供無障礙名稱，請不要加入元素名稱。螢幕閱讀器會向使用者提供元素名稱。舉例來說，使用 <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>

避免變更分頁順序

目錄可能會顯示在標題後方、較小的螢幕上，或是在右側對齊的側欄中。加入兩組相同的導覽選單，但只顯示其中一個，就是反模式。

我們使用 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"

導覽標記的各個部分會顯示從目前網頁返回首頁的路徑，並顯示中間的每個層級。

每個 Learn 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 顯示屬性值會移除某些元素的語義而新增。

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

目前的頁面「導覽」未包含在麵包屑中。

目前頁面

當目前網頁包含在麵包屑中時，文字最好不是連結，且目前網頁的清單項目應包含 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」中各部分的連結。這些連結和篩選列是位置導覽功能。

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

在寬螢幕上顯示永久的本機導覽，與在較窄螢幕上顯示本機導覽的主要差異，在於箭頭會導回主要頂端導覽，然後關閉導覽。

這份文件的連結與本機導覽中的其他連結相同。 不過，該連結的外觀可能與其他連結略有不同，以便向視障使用者指出這是目前的頁面。因此，建議您使用 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 團隊提供的相關內容，以及外部社群媒體連結。

接下來要學習如何標記資料表

進行隨堂測驗

測驗您對導覽功能的瞭解程度。