導航

如同您在連結所學，包含 href 屬性的 <a> 元素會建立連結，使用者可點選或輕觸前往。您已透過「清單」建立內容清單。在本節中，您將瞭解如何將連結清單分組以建立導覽。

瀏覽方式有很多種，還有多種顯示方式。在連結至相同網站內其他網頁的文字中，其已命名的錨點視為本地導覽。本機導覽是指由一系列連結顯示，依網站結構顯示目前網頁階層結構，或使用者前往目前頁面所點選的頁面，而這串連結稱為導覽標記。網頁的目錄是另一種本機導覽類型。包含可連至網站上所有網頁的階層連結網頁稱為「網站地圖」。導覽部分會導向網站所有最上層頁面 (顯示在每個網頁的最上層頁面)，也就是全域導覽。 全域導覽會以多種方式顯示，包括導覽列、下拉式選單和跳出選單。視可視區域的大小而定，同一個網站的全域導覽功能可能會不同。

請務必確保使用者能以最少的點擊次數瀏覽你網站上的任何網頁，同時確保導覽機制符合直覺，不會讓人感到疲乏。不過，系統對導覽元素並沒有特別的規定。MachineLearningWorkshop.com 是單頁網站，在右上角有本機導覽列，而多頁面網站經常會將其全域導覽置於這個頁面。

在 web.dev 查看此頁面時，會看到一些導覽功能。標題上方會有一個導覽標記，標題後方會顯示「本頁」的目錄，還有「學習 HTML」目錄，可視螢幕寬度而定，在按一下選單按鈕時一律顯示或顯示。網頁上的第一個元素是 #main 的隱藏連結，讓您可以略過側欄和導覽標記連結。

「跳至內容」連結

網頁上的第一個元素是內部連結：

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

當使用者點選或聚焦於 Enter 時，會捲動頁面並聚焦主要內容：也就是 id 為 main 的地標 <main>：

<main id="main">

即使你已詳閱先前的所有章節，可能從未看過這個網站上的連結。 只有在擁有焦點時才會顯示：

為提升可用性和存取便利性，請務必讓使用者略過每個網頁重複的內容。 系統會納入跳轉連結，因此鍵盤使用者在載入時按下 tab 後，即可快速跳到網站的主要內容，避免需按分頁查看大量的連結。在這個頁面中，略過連結會略過區段的側欄導覽及導覽標記導覽，將使用者直接導向網頁標題。

大部分設計人員不喜歡在頁面頂端加上連結。您可以先在別忘了在檢視畫面中隱藏連結，同時記住連結焦點時，當鍵盤使用者透過網頁上的連結分頁時，所有使用者都能看到連結。使用類似於 .visually-hidden:not(:focus):not(:active) 的選取器，只隱藏非聚焦和非使用狀態的內容。

連結文字為「skip to main」。這個連結的無障礙名稱。這是技術網站，使用者可能知道「主」的意思。 如同所有連結文字，無障礙名稱應清楚指出連結導向的位置。連結目標應該是網頁主要內容的開頭。如要測試這一點，請在網頁載入時使用 Tab 鍵瀏覽至「跳至主」連結，接著按下 Enter，確保應用程式「跳轉」至主要內容。

目錄

跳轉內容連結會將主要內容捲動到檢視畫面中。第一個元素是 <h1> 標題，其中包含這個區塊的標題。在這種情況下，<h1>Marking up navigation</h1>。主要標題後面接有標語，提供本教學課程內容的簡短說明。根據瀏覽器寬度，將目錄導覽的目錄放在程式碼集中標題之前或之後。

如果您的瀏覽器寬度超過 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>

如果您的瀏覽器寬度小於 80 毫米，「在本網頁上」小工具則位於標題和標語下方。方法是加入兩個內容資料表導覽元件，並根據媒體查詢使用 CSS display: none; 隱藏其中一個元件。

加入兩個相同的小工具，一個只顯示一個反面模式。額外的位元組無法理解。我們建議使用 CSS display: none 隱藏所有使用者的 HTML 內容。問題是，在寬螢幕上，目錄位於 #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 模組頁面都有相同的導覽標記導覽，顯示 web.dev 的 learn 區段中 HTML 課程的階層。程式碼與下列程式碼類似，但為了清楚起見，移除了類別和 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
}

螢幕閱讀器不會「看到」，這是最佳做法：不應讓螢幕閱讀器隱藏導覽標記連結之間的分隔符。 此外，圖片與背景的對比度必須和一般文字相同。

這個版本使用未排序的清單和清單項目。排序清單建議使用以列舉方式呈現。此外也這是清單：role="list" 已加回，因為部分 CSS 顯示屬性值會從部分元素中移除語意。

一般來說，導覽標記中的首頁連結應為「首頁」，而不是以網站名稱做為標籤的網站標誌。不過，由於導覽標記位於文件頂端，且是網頁上唯一的標誌出現，所以使用這種反模式時很合理。

最後一個元素是自訂 <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 會根據缺少 data-complete="true" 屬性和值，為先前未曾造訪此頁面的使用者隱藏相關核取方塊。display: none

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

將 display 設為 none 以外的內容時，role 會通知輔助技術，指出內嵌 SVG 是圖片，而 aria-label 會在 <img> 上做為 alt 屬性。

全域導覽

全域導覽是指導向網站中所有頁面相同的頂層頁面。 網站的全域導覽也可能由分頁組成，以開啟巢狀連結清單，連至網站的所有子部分或其他選單。其中可能包含標題區段、按鈕和搜尋小工具。這些額外功能並非必要條件。每個頁面都要有導覽機制，且每個網頁都相同；當然，在指向目前頁面的任何連結上使用 aria-current="page"。

全域導覽可讓使用者在應用程式或網站中享有一致的交通方式。Google 並未在頁面頂端提供全域導覽功能。Yahoo! 也支援。雖然所有主要 Yahoo! 資源都有不同的樣式，但多數部分的內容都相同。

新聞和體育賽事的全域導覽標頭內容相同，但是顯示使用者目前正在運動的圖示並沒有足夠的對比度，因此無法瀏覽；即使訪客沒有低視能，也無法存取。這兩個部分都提供全域導覽，並在下方提供特定區段的本機導覽。

與全域導覽類似，所有頁面上的頁尾都應相同。但這是唯一的相似之處。全域導覽功能可讓使用者從產品的角度瀏覽網站所有部分。頁尾的導覽元素沒有特殊規定。一般而言，頁尾會包含公司連結 (例如法律聲明、公司資訊及職涯)，並且可能會導向外部來源，例如社群媒體圖示。

本頁頁尾包含另外三個 <nav> 元素：頁尾導覽、Google 開發人員、條款和政策，每個元素都是連結。頁尾導覽列包含如何在 GitHub 上為 web.dev 做出貢獻；Google 在 web.dev 以外的平台提供的其他教育內容，以及外部的「如何連結」連結。

<footer> 中的這三個導覽是 <nav> 元素，其中 aria-label 為這些地標角色提供容易理解的名稱。我們看到的所有導覽導覽都是在導覽面板中的清單巢狀結構中。我們整理了建立導覽檢視畫面的所有須知。 接下來，我們要瞭解如何標記資料表。

隨堂測驗

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