導航

如同連結所述，含有 href 屬性的 <a> 元素可以建立連結，讓使用者點選或點選 輕觸。您已在清單中瞭解如何建立內容清單。本節將說明如何將 來建立導覽。

我們提供多種導覽類型和顯示方式。文字中的具名錨定標記，連結至 內的其他網頁 相同的網站就屬於本地導覽。本機導覽，包含一系列顯示 也就是相對於網站結構，或使用者為了前往目前網頁而連上的網頁，稱為導覽標記。 頁面目錄是另一種本機瀏覽方式。我們稱之為包含網站上每個網頁的階層連結網頁，稱為 就可以對內容進行網站地圖每個網頁上都能導向網站的頂層網頁，稱為全域導覽部分。 全域導覽有多種不同的顯示方式，包括導覽列、下拉式選單和延伸選單。 視可視區域的大小而定，相同網站顯示的全域導覽方式可能有所不同。

請務必確保使用者能夠以最少的點擊次數前往網站上的任何頁面，同時確保瀏覽體驗 符合直覺，又不會讓人眼花撩亂換句話說，導覽元素並沒有特定的需求。MachineLearningWorkshop.com 網站是單頁網站，右上方有本機導覽列；多網頁網站經常會在這裡提供全域導覽功能。

如果您是透過 web.dev 查看這個頁面，可能會發現一些導覽功能。標題上方有導覽標記 「本頁面提供」標題後方的目錄，以及「學習 HTML」目錄會根據畫面寬度 每次都會顯示，或點選選單按鈕時顯示。網頁上的第一個元素是 #main 的隱藏連結，可讓您同時略過側欄和導覽標記連結。

「跳至內容」link (連結)

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

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

當使用者按下或焦點位於焦點時，Enter就會捲動網頁，將焦點放在主要內容： 地標 <main>，其中 id 為 main：

<main id="main">

即使您已閱讀過所有章節，但可能未曾在這個網站上看到連結。 只有在其聚焦時才會顯示：

為提升可用性和瀏覽便利性，請務必讓使用者略過每個網頁重複的內容區塊。 系統會納入略過連結，因此鍵盤使用者在載入時按下 tab，即可快速跳至網站的主要內容，避免 也不必在大量連結的情況下在此頁面上，略過連結會略過區段層級的側欄導覽和導覽標記導覽。 並將使用者直接帶到網頁標題。

大部分的設計人員都不喜歡在頁面頂端顯示連結。可以在記住圖片時隱藏連結，讓畫面不顯示 將焦點移至連結後 (當鍵盤使用者透過頁面上的連結執行分頁時)，必須讓所有使用者都能看見該連結。 請使用類似 .visually-hidden:not(:focus):not(:active) 的選取器，只在非啟用和非使用狀態下隱藏內容。

連結文字為「跳到主要頁面」。這個連結的存取名稱。這是一個技術性網站，使用者可能也知道什麼是「主要」代表。 如同所有連結文字，無障礙名稱必須清楚指出連結會將使用者帶往何處。連結目標必須是 會擷取網頁的主要內容如要測試這個問題，請在網頁載入後按下 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>

如果瀏覽器的寬度小於 80em，則顯示「本頁麵包含以下內容」訊息：位於標題和標語下方方法是加入 。display: none;根據媒體查詢，將其中一個或另一個目錄的導覽元件隱藏起來

若是只加入兩個相同的小工具，只顯示一個小工具，是反模式。額外的位元組可以忽略。從以下位置隱藏 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
}

螢幕閱讀器不會「顯示」因此最佳做法是：螢幕閱讀器不要顯示導覽標記連結之間的分隔符。 此外，這類文字也必須與背景形成足夠對比，就像使用一般文字一樣。

這個版本使用未排序的清單和清單項目。由於附有已排序的清單項目進行列舉，因此建議使用已排序的清單。 此外，這是清單：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 會根據缺少 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!確實如此儘管所有主要的 Yahoo!屬性的樣式各不相同， 大部分部分都相同

新聞和運動全域導覽標頭相同，但圖示顯示使用者目前 對運動賽事的對比不夠鮮明讓無視力障礙的訪客也能輕鬆受惠這兩個部分 下方有區段專屬的本機導覽。

與全域導覽功能類似，所有頁面的頁尾必須相同。但這只是唯一的相似度。全域導覽 可讓使用者從產品的角度瀏覽網站的各個部分。頁尾中的導覽元素沒有特定要求。 一般來說，頁尾會包含企業連結 (例如關於公司和職涯的法律聲明)，且可能導向外部社群 例如社群媒體圖示

本頁面的頁尾包含三個額外的 <nav> 元素：頁尾導覽、Google 開發人員，以及條款與政策。 分別以連結表示頁尾導覽說明如何在 GitHub 上為 web.dev 貢獻一己之力； web.dev 以外的 Google 服務，以及外部的「如何連線」外部 IP 位址連結。

<footer> 中的這三個導覽是 <nav> 元素，並aria-label為這些地標角色提供無障礙名稱。 我們看過的所有導覽都會以巢狀結構在清單內，以巢狀結構呈現連結，我們探討了建立導覽所需的所有須知。 接下來要學習如何標記資料表

隨堂測驗

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