側邊導覽 (Side Navigation)

新提案
→
封閉測試
→
公開測試
→
已穩定

成熟度說明

新提案：未完成開發、請勿使用。
封閉測試：開發暫時性完成，可使用。可能仍有親和力或其他使用上問題待透過實測發現。
公開測試：開發暫時性完成，歡迎使用。具有完整親和力報告。
已穩定：開發完成、歡迎使用。應無任何親和力或使用上問題。

基本側邊導覽

單層子選單，可透過點擊或鍵盤展開/收合
以左側粗邊框標示目前頁面

HTML

<nav aria-label="側邊導覽" class="side-navigation">
  <ul>
    <li>
      <a aria-current="page" href="#about">關於我們</a>
    </li>
    <li>
      <button type="button" aria-expanded="false">最新消息</button>
      <ul>
        <li>
            <a href="#news">新聞稿</a>
        </li>
        <li>
            <a href="#event">活動公告</a>
        </li>
        <li>
            <a href="#policy">政策更新</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#question">常見問答</a>
    </li>
    <li>
      <a href="#contact">聯絡我們</a>
    </li>
  </ul>
</nav>

多層巢狀導覽

支援三層以上的巢狀結構
子層以縮排與左側邊線區分層級

HTML

<nav aria-label="側邊導覽" class="side-navigation">
  <ul>
    <li>
      <a href="#about" aria-current="page">關於我們</a>
    </li>
    <li>
      <button type="button" aria-expanded="false">服務項目</button>
      <ul>
        <li><a href="#online-application">線上申辦</a></li>
        <li>
          <button type="button" aria-expanded="false">表單下載</button>
          <ul>
            <li><a href="#application-form">申請表</a></li>
            <li><a href="#consent-form">同意書</a></li>
            <li><a href="#affidavit">切結書</a></li>
          </ul>
        </li>
        <li><a href="#progress-inquiry">進度查詢</a></li>
      </ul>
    </li>
    <li>
      <a href="#regulations">法規資訊</a>
    </li>
    <li>
      <a href="#contact">聯絡我們</a>
    </li>
  </ul>
</nav>

CSS

.side-navigation：套用於 <nav> 容器
aria-current="page"：目前頁面連結，自動套用粗體與左側指示邊框

JavaScript

使用 side-navigation.js。
JavaScript 選擇器為 .side-navigation，負責切換 <button> 的 aria-expanded 狀態。

親和力

使用原生 <nav> + <ul> + <button> 傳達結構、階層與互動狀態
當前頁面同時以粗體與左側邊框指示，不僅依賴色彩
所有互動均可透過 Tab + Enter/Space 操作
DOM 順序即為焦點順序，與視覺呈現一致
鍵盤焦點有清楚的外框指示
原生元素自帶角色；aria-expanded 傳達展開狀態；aria-current 傳達目前頁面

參考資料

USWDS — Side Navigation