界面组件 核心 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 适用范围: 无障碍、使用指南、避免事项 本页用途: 只支持写明的范围 来源涵盖内容: 无障碍, 使用指南, 避免事项

自行复制

浏览器无法自动复制。请选择下方文字,再自行复制。