什麼是焦點順序視覺化工具？

貼上任何HTML程式碼，即可看到鍵盤Tab鍵的導覽順序。每個可聚焦元素上都會顯示編號標記，方便你一眼發現導覽問題。專為無障礙稽核人員和開發者檢查WCAG合規性而設計。

視覺化工具能識別連結、按鈕、表單輸入框、文字區域、下拉選單、details/summary 折疊元件、contenteditable 區域，以及任何明確設定 tabindex 的元素。每個可聚焦元素都會獲得編號徽章和標記，區分位置來自 DOM 自然順序還是 tabindex 強制覆蓋。它還會為頁面打出 0 到 100 的評分，標出缺少可存取名稱的控制項（也就是只有圖示的按鈕問題），並顯示有多少互動元素根本無法透過 Tab 到達。分析結果可以匯出為純文字報告，或匯出為結構化 CSV，供稽核存檔與缺陷追蹤使用。

使用方法

1. 將HTML程式碼貼到編輯器中，或上傳HTML檔案來檢查Tab鍵順序。
2. 每個可聚焦元素（連結、按鈕、輸入框）上會顯示編號標記，展示Tab鍵序列。
3. 查看無障礙評分與問題面板，修正亂序、缺少名稱或鍵盤無法到達的元素，然後將結果匯出為文字報告或 CSV。

何時使用

• 頁面送交 WCAG 2.1 AA 認證前的預先稽核檢查。
• 頁面版面或元件重構後排查 Tab 鍵順序回歸問題。
• 驗證 modal 或側拉選單是否正確捕獲鍵盤焦點。

結果

一位無障礙顧問貼上了客戶的註冊表單HTML。視覺化工具抓到「送出」按鈕比「服務條款」核取方塊更早取得焦點，原因是一個正數tabindex打亂了順序。這就是一處WCAG 2.4.3違規。

常見問題

tabindex 設定正整數是不是總是錯的？

幾乎總是錯的。正整數 tabindex（1、2、3……）會把元素從 DOM 自然順序中提出來，導致游標在頁面中亂跳。請堅持用 tabindex="0" 讓非互動元素可獲焦，或用 tabindex="-1" 保留程式化焦點同時移出 Tab 鍵鏈。

清單裡的「自然」和「自訂」是什麼意思？

「自然」表示元素的 Tab 位置來自 HTML 原始碼中的位置。「自訂」表示正整數 tabindex 把它強行挪到了別的位置。自訂位置會被特別標出，因為這是 WCAG 2.4.3 未通過的最常見原因。

隱藏的元素會出現在焦點順序裡嗎？

如果元素是 display:none 或 visibility:hidden，瀏覽器本身會跳過，視覺化工具也不會顯示。但 aria-hidden 單獨使用無法移除可聚焦性，是常見 bug。清單會顯示這類元素，矩形資料能幫你判斷是否可見。

工具能偵測 modal 焦點未被捕獲的問題嗎？

工具顯示的是順序，不會告訴你焦點是否會從 modal 溜出去。貼上 modal 打開狀態的 HTML，看看第一個和最後一個可聚焦元素是否都在對話框內部。如果 Tab 跳到了 body 其他內容，就代表焦點陷阱缺失。

為什麼我預期可聚焦的元素沒出現在清單裡？

停用的輸入框、沒有 href 的 anchor 標籤、沒設 tabindex 的 div 都會被跳過，因為瀏覽器本來就無法聚焦它們。如果 div 需要可達，加 tabindex="0"；anchor 加上 href；input 移除 disabled 屬性。

相關工具