步驟指示器 (Progress Stepper)
- 新提案
- →
- 封閉測試
- →
- 公開測試
- →
- 已穩定
成熟度說明
- 新提案：未完成開發、請勿使用。
- 封閉測試：開發暫時性完成，可使用。可能仍有親和力或其他使用上問題待透過實測發現。
- 公開測試：開發暫時性完成，歡迎使用。具有完整親和力報告。
- 已穩定：開發完成、歡迎使用。應無任何親和力或使用上問題。
說明
- 步驟指示器（Progress Stepper）用於向使用者呈現其在多步驟流程中的進度，例如線上申辦、多頁表單、結帳等情境。
- 適合用於有明確線性順序、且可拆分為 3 個以上階段的流程。
預設（含標籤）
- 個人資料 已完成
- 家戶狀態 已完成
- 檢附文件
- 簽章 未完成
- 檢閱與送出 未完成
第
3
步，共
5
步
檢附文件
HTML
<div class="progress-stepper">
<ol class="progress-stepper__segments">
<li class="progress-stepper__segment progress-stepper__segment--complete">
<span class="progress-stepper__label">個人資料</span>
<span class="progress-stepper__status-text">已完成</span>
</li>
<li class="progress-stepper__segment progress-stepper__segment--complete">
<span class="progress-stepper__label">家戶狀態</span>
<span class="progress-stepper__status-text">已完成</span>
</li>
<li class="progress-stepper__segment progress-stepper__segment--current" aria-current="step">
<span class="progress-stepper__label">檢附文件</span>
</li>
<li class="progress-stepper__segment">
<span class="progress-stepper__label">簽章</span>
<span class="progress-stepper__status-text">未完成</span>
</li>
<li class="progress-stepper__segment">
<span class="progress-stepper__label">檢閱與送出</span>
<span class="progress-stepper__status-text">未完成</span>
</li>
</ol>
<div class="progress-stepper__heading">
<span class="progress-stepper__heading-counter">
<span class="progress-stepper__heading-text">第</span>
<span class="progress-stepper__current-step">3</span>
<span class="progress-stepper__heading-text">步，共</span>
<span class="progress-stepper__total-steps">5</span>
<span class="progress-stepper__heading-text">步</span>
</span>
<h4 class="progress-stepper__heading-text">檢附文件</h4>
</div>
</div>含編號
以數字圓圈強化「第幾步」的視覺暗示，適合需要強調步驟順序的流程。
- 個人資料 已完成
- 家戶狀態 已完成
- 檢附文件
- 簽章 未完成
- 檢閱與送出 未完成
第
3
步，共
5
步
檢附文件
HTML
<div class="progress-stepper progress-stepper--counters">
<ol class="progress-stepper__segments">
<li class="progress-stepper__segment progress-stepper__segment--complete">
<span class="progress-stepper__counter" aria-hidden="true">1</span>
<span class="progress-stepper__label">個人資料</span>
<span class="progress-stepper__status-text">已完成</span>
</li>
<li class="progress-stepper__segment progress-stepper__segment--complete">
<span class="progress-stepper__counter" aria-hidden="true">2</span>
<span class="progress-stepper__label">家戶狀態</span>
<span class="progress-stepper__status-text">已完成</span>
</li>
<li class="progress-stepper__segment progress-stepper__segment--current" aria-current="step">
<span class="progress-stepper__counter" aria-hidden="true">3</span>
<span class="progress-stepper__label">檢附文件</span>
</li>
<li class="progress-stepper__segment">
<span class="progress-stepper__counter" aria-hidden="true">4</span>
<span class="progress-stepper__label">簽章</span>
<span class="progress-stepper__status-text">未完成</span>
</li>
<li class="progress-stepper__segment">
<span class="progress-stepper__counter" aria-hidden="true">5</span>
<span class="progress-stepper__label">檢閱與送出</span>
<span class="progress-stepper__status-text">未完成</span>
</li>
</ol>
<div class="progress-stepper__heading">
<span class="progress-stepper__heading-counter">
<span class="progress-stepper__heading-text">第</span>
<span class="progress-stepper__current-step">3</span>
<span class="progress-stepper__heading-text">步，共</span>
<span class="progress-stepper__total-steps">5</span>
<span class="progress-stepper__heading-text">步</span>
</span>
<h4 class="progress-stepper__heading-text">檢附文件</h4>
</div>
</div>無標籤
當步驟名稱過長或空間有限時使用。標籤列以 aria-hidden="true" 隱藏避免螢幕報讀軟體朗讀無意義資訊，進度資訊仍由下方標題傳達。
第
3
步，共
5
步
檢附文件
HTML
<div class="progress-stepper progress-stepper--no-labels">
<ol class="progress-stepper__segments" aria-hidden="true">
<li class="progress-stepper__segment progress-stepper__segment--complete"></li>
<li class="progress-stepper__segment progress-stepper__segment--complete"></li>
<li class="progress-stepper__segment progress-stepper__segment--current"></li>
<li class="progress-stepper__segment"></li>
<li class="progress-stepper__segment"></li>
</ol>
<div class="progress-stepper__heading">
<span class="progress-stepper__heading-counter">
<span class="progress-stepper__heading-text">第</span>
<span class="progress-stepper__current-step">3</span>
<span class="progress-stepper__heading-text">步，共</span>
<span class="progress-stepper__total-steps">5</span>
<span class="progress-stepper__heading-text">步</span>
</span>
<h4 class="progress-stepper__heading-text">檢附文件</h4>
</div>
</div>CSS
.progress-stepper：最外層容器。.progress-stepper--counters：數字編號變體。.progress-stepper--no-labels：無標籤變體。.progress-stepper__segments：步驟清單（ol）。.progress-stepper__segment：單一步驟項目（li）。.progress-stepper__segment--complete：已完成步驟。.progress-stepper__segment--current：目前步驟。.progress-stepper__label：步驟文字標籤。.progress-stepper__counter：數字編號圓圈（僅 counter 變體）。.progress-stepper__status-text：視覺隱藏的完成狀態文字（供螢幕報讀軟體朗讀）。.progress-stepper__heading：步驟指示器下方的標題區。.progress-stepper__heading-counter：「第 N 步，共 M 步」文字。
使用規範
- 明顯區別目前步驟：目前步驟應是視覺上最為突出的，其次是已完成步驟，未完成步驟最弱；但未完成步驟仍需符合色彩對比規範，不應看起來像「停用」狀態。
- 使用簡短標籤：標籤請用短詞或單一詞彙；若標籤過長，改採用無標籤版本。
- 導覽另外提供：步驟指示器不負責頁面切換；請以「上一步／下一步」按鈕提供導覽。
- 標題放在指示器下方：每個步驟頁面都應有明確的頁面標題；步驟指示器的標籤不足以作為頁面標題。
- 顯示「第 N 步，共 M 步」：在標題旁顯示目前進度數字，強化使用者對流程的掌握。
- 避免過多步驟：若步驟超過 6 個，應考慮拆分為多個子流程或改用其他呈現方式。
親和力
- 使用
<ol>原生有序清單語意呈現步驟。 - 以
aria-current="step"標示目前所在的步驟項目，讓輔助科技使用者得知自己位於整個流程的何處。 - 每個步驟內以視覺隱藏的文字補上「已完成」「未完成」等完成狀態，避免僅以顏色傳達資訊。
- 目前步驟不加「已完成／未完成」狀態文字，避免重複朗讀。
- 無標籤變體將整個
<ol>以aria-hidden="true"隱藏，因為其中無實質內容；進度資訊由下方的「第 N 步，共 M 步 — 步驟名稱」標題傳達，確保輔助科技使用者仍能獲得完整資訊。 - counter 變體中的數字圓圈僅為視覺裝飾，以
aria-hidden="true"隱藏，避免螢幕報讀軟體朗讀出與順序重複的數字。 - 步驟指示器本身不具互動功能，因此不需處理鍵盤焦點；若未來要將各步驟設計為可點擊回溯，應改為
<a>或<button>，並處理:focus-visible樣式。