網站導覽系統
目的
「網站導覽系統」技能提供了一套組織與設計網站結構路徑的方法論。它能確保使用者清楚自身所在位置、快速找到資訊，並在不同裝置類型間流暢切換章節。一個穩固的導覽系統需要在資訊密度與清晰度之間取得平衡，同時維護無障礙性與視覺層級。
使用案例
- 為新網站設計全域頁首與頁尾。
- 重構複雜網站的資訊架構 (IA)。
- 實作響應式導覽模式（例如：行動抽屜式選單、大型選單）。
- 改善內容豐富網站的「路徑指引」（麵包屑、子導覽）。
- 稽核現有導覽的無障礙性與易用性差距。
何時不應使用
- 路由極簡的單頁應用 (SPA)： 導覽僅在單一檢視內具功能性（例如：簡單的儀表板工具）。
- 沉浸式／實驗性網站： 為了敘事或藝術目的而刻意避免標準導覽慣例。
- 獨立登陸頁面： 目標是單一轉換路徑，全域導覽可能分散使用者注意力（但仍可能使用「回到頂端」或極簡錨點導覽）。
輸入
- 資訊架構 (IA)： 網站地圖或按層級分類的頁面清單。
- 使用者人物誌與目標： 使用者最常執行的任務是什麼？
- 內容優先級： 哪些連結是「主要」（全域）、「次要」（情境相關）或「工具」（帳號／工具）？
- 裝置限制： 目標斷點以及觸控與滑鼠互動需求。
輸出
- 導覽地圖： 頁首、頁尾與子導覽元素的結構指南。
- 響應式策略： 導覽如何從桌面適應到行動裝置的定義。
- 互動規格： 下拉選單、啟用狀態與焦點管理的行為。
- 無障礙地標： 為螢幕報讀器導覽定義的角色與標籤。
工作流程
1. 分類導覽層級
將您的網站地圖劃分為功能層級：
- 主要： 核心網站區塊（例如：產品、服務、關於我們）。
- 次要／情境相關： 特定章節的連結（例如：特定產品分類）。
- 工具： 非核心但必要的工具（例如：搜尋、登入、語言選擇器）。
- 第三層（頁尾）： SEO 連結、法律資訊、社群媒體與重複的全域連結。
2. 選擇導覽模式
根據內容密度選擇模式：
- 簡單橫幅： 3–7 個連結。適合小型到中型網站。
- 下拉選單： 適合擁有 2 層層級的網站。
- 大型選單： 適合擁有許多分類的大型電子商務或企業網站。
- 行動抽屜式選單： 行動裝置標準；以垂直堆疊方式包含所有導覽層級。
3. 設計路徑指引
確保使用者隨時知道他們在哪裡：
- 啟用狀態： 用視覺區分目前頁面連結，並為輔助技術標記
aria-current="page"。 - 麵包屑： 用於深度超過 3 層的網站。
- 位置一致： 在所有頁面上保持全域導覽在同一位置。
4. 定義響應式行為
決定導覽如何收合：
- 斷點切換： 確切決定桌面選單何時變成「漢堡」選單。
- 優先級縮減： 在行動裝置上，如果工具連結（如「搜尋」）具有高優先級，將其從抽屜移至頁首。
- 觸控目標： 符合 WCAG 2.2 SC 2.5.8（目標大小最小值），尺寸為 24x24px 並有足夠間距；主要拇指互動目標建議採用 44x44px。
5. 建立無障礙性
- 地標： 使用帶有唯一
aria-labels的<nav>標籤（例如：「主選單」、「頁尾」）。 - 鍵盤路徑： 確保邏輯的 Tab 順序與可見的
:focus-visible狀態，且絕不被固定頁首或疊層遮蔽（WCAG 2.2 SC 2.4.11 焦點未被遮蔽）。 - 跳過連結： 為鍵盤使用者提供「跳至主要內容」連結。
- ARIA 狀態： 對可切換的選單使用
aria-expanded與aria-controls。
決策規則
- 7 項連結規則： 盡量將主要導覽限制在 7 個項目或以下，以減輕認知負荷（米勒法則）。
- 可預測性優於創新： 使用標準圖示（漢堡圖示代表選單、放大鏡代表搜尋）以確保立即辨識。
- 視覺層級： 最重要的動作（例如：「立即開始」）應是樣式化的按鈕，而非文字連結。
- 固定 vs. 靜態： 僅在使用者滾動時需要頻繁存取導覽（例如：長篇內容或儀表板）時才使用固定頁首。
限制條件
- 無障礙性： 必須能完全僅用鍵盤導覽。導覽連結的對比度必須符合 WCAG AA（4.5:1）。觸控目標符合 WCAG 2.2 SC 2.5.8。
- 響應式： 導覽絕不能水平溢出視窗。
- 層級： 導覽不應與頁面的 H1 或主要行動呼籲按鈕競爭。
常見失敗模式
- 「謎之肉」導覽： 使用沒有標籤的圖示，且這些圖示並非普遍可理解。
- 過度擁擠的頁首： 嘗試放入過多工具連結，導致混亂與誤點。
- 無法存取的抽屜： 建立的行動選單無法透過鍵盤關閉，或開啟時無法鎖定焦點。
- 缺乏回饋： 使用者位於目前頁面或懸停在連結上時沒有視覺變化。
驗證標準
- 導覽已劃分為清晰的層級（主要、工具、頁尾）。
- 啟用狀態在視覺上分明且具無障礙性。
- 行動導覽可運作，並包含所有主要連結。
- 鍵盤使用者可以僅用鍵盤存取所有連結並關閉選單。
- 地標（
<nav>）已正確使用並標記。 - 行動裝置上的觸控目標至少符合 WCAG 2.2 24x24px 最小值（主要動作建議為 44x44px）。
- 「跳至主要內容」連結存在且可運作。