介面元件 核心 A1 · 正式標準 平台: 網頁

Keyboard Trap

鍵盤焦點陷阱

鍵盤焦點陷阱是焦點進入頁面某處後,無法再用鍵盤離開。

看看怎麼運作
也有人這樣說 Keyboard Trap焦點卡死鍵盤卡住

看看怎麼運作

原創情境範例鍵盤焦點陷阱

另一個例子

旅客開啟日期選擇器後,可以在日期間移動、按 Escape 關閉,或選好後按 Tab 離開。壞掉的日曆會攔住每次 Tab,讓使用者無法離開。

主要部分

  1. 01進入路徑
  2. 02內部操作
  3. 03已說明出口

什麼時候用

用純鍵盤測試每個複合元件、浮動層、嵌入式編輯器和第三方框架。確認使用者能進入,也能離開。

什麼時候不要用

若模態對話框每次都能用 Escape 或清楚的關閉按鈕離開,它的焦點循環就不是陷阱。

程式裡的名稱

keyboard-only test: enter, operate, Escape or Tab out

上線前要檢查

發布前檢查頁面結構、鍵盤操作、清楚可見的焦點、對比與縮放。也要檢查載入、沒有內容、錯誤、成功、取消與減少動態效果。

可以直接複製的需求

預期成果:使用 鍵盤焦點陷阱 (Keyboard Trap) 解決這項需求,同時保留使用者目前的操作脈絡。 使用者情境:旅客開啟日期選擇器後,可以在日期間移動、按 Escape 關閉,或選好後按 Tab 離開。壞掉的日曆會攔住每次 Tab,讓使用者無法離開。 建議介面模式:鍵盤焦點陷阱 (Keyboard Trap)。 適用理由:用純鍵盤測試每個複合元件、浮動層、嵌入式編輯器和第三方框架。確認使用者能進入,也能離開。 不應使用的情況:若模態對話框每次都能用 Escape 或清楚的關閉按鈕離開,它的焦點循環就不是陷阱。 產品要求:定義預設、載入、沒有內容、錯誤、成功與復原狀態。保留使用者已輸入的內容,每個操作後都提供清楚回饋。 無障礙與韌性:使用結構正確的 HTML(語意化 HTML)和完整鍵盤操作。焦點要清楚可見,版面縮放後仍要好用。也要提供減少動態效果。遵守專案現有規則。除非專案已採用,否則不要新增介面元件庫。 驗收條件:主要任務可只用鍵盤完成,在 320px 寬度也能正常使用。焦點與狀態變化可被輔助工具讀出。載入、失敗、重試、取消與減少動態效果都已驗證。 證據與限制(證據邊界):標準只涵蓋列出的範圍,不會替你決定外觀、產品做法或 Vibulary 的教學範例。 待確認:產品文字、資料來源、分析事件、支援裝置與語系,以及平台特有限制。

檢查這份需求

請 AI 程式助手檢查目前如何使用 鍵盤焦點陷阱 (Keyboard Trap)。 定義:鍵盤焦點陷阱是焦點進入頁面某處後,無法再用鍵盤離開。 正式環境檢查:發布前檢查頁面結構、鍵盤操作、清楚可見的焦點、對比與縮放。也要檢查載入、沒有內容、錯誤、成功、取消與減少動態效果。 修改程式前,先列出看到的證據、缺口、嚴重程度,以及最小且安全的修正。

A1
這個術語有多正式?

正式標準

本頁說明的規則,可在列出的正式標準中找到。

標準只涵蓋列出的範圍,不會替你決定外觀、產品做法或 Vibulary 的教學範例。

適用範圍
只包含來源有說明的內容:無障礙、使用指南、避免事項
文件狀態
正式建議標準
查證日期
2026-07-30

證據來源與適用範圍

正式來源 + 術語參考資料 · W3C · 正式建議標準 Web Content Accessibility Guidelines (WCAG) 2.2 — Success Criterion 2.1.2 No Keyboard Trap Success Criterion 2.1.2 No Keyboard Trap 適用範圍: 無障礙、使用指南、避免事項 本頁用途: 直接術語參考 來源涵蓋內容: 無障礙, 使用指南, 避免事項 正式來源 · W3C · 正式建議標準 Web Content Accessibility Guidelines (WCAG) 2.2 適用範圍: 無障礙、使用指南、避免事項 本頁用途: 只支援寫明的範圍 來源涵蓋內容: 無障礙, 使用指南, 避免事項 正式來源 · W3C WAI · 穩定 Understanding Success Criterion 2.1.2: No Keyboard Trap 適用範圍: 無障礙、使用指南、避免事項 本頁用途: 只支援寫明的範圍 來源涵蓋內容: 無障礙, 使用指南, 避免事項

自行複製

瀏覽器無法自動複製。請選取下方文字,再自行複製。