标准 · WCAG 2.2

SC 2.1.2 级别 A WCAG 2.0

无键盘陷阱

若键盘焦点可以移入某个组件,则必须能仅用键盘将焦点移离该组件。模态框、嵌入内容及自定义控件是常见的违规场景。

要求内容

若用户可以用 Tab 键将焦点移入某个组件,则必须能用 Tab 键(或 Shift+Tab,或其他有文档说明的按键)将焦点移离该组件,而无需使用鼠标。若需要使用标准方向键或 Tab 之外的按键才能退出——例如按 Ctrl+M 退出嵌入的视频播放器——则必须在页面上向用户说明退出方式。

这与模态框内的焦点限制不同——后者是一种合理模式:模态框将焦点循环限制在自身内部,但在用户关闭模态框后会释放焦点。键盘陷阱的含义是:没有任何有文档说明的退出途径。

如何满足

  • 在模态对话框内,用 Tab 和 Shift+Tab 在第一个和最后一个可聚焦元素之间循环,在用户按下 Escape 时关闭对话框,同时将焦点返回至触发元素。
  • 对于嵌入第三方内容(视频播放器、地图、来自未知来源的 iframe),测试 Tab 键是否能继续移过该嵌入内容。若不能,则需在嵌入内容附近说明退出按键。
  • 对于消耗方向键的自定义控件(日期选择器、组合框、树形视图),保持 Tab 键作为通用退出方式——绝不阻止 Tab 键。
  • 对于使用 Tab 键缩进的拖拽句柄或富文本编辑器,提供有文档说明的替代方式(按 Escape 释放、按 Ctrl+M 退出编辑模式),并在界面上予以说明。

常见失败

  • 模态对话框限制了焦点,但按 Escape 无法关闭,也没有可聚焦的”关闭”按钮。
  • 嵌入的 PDF 查看器、Flash 遗留内容,以及部分 Tableau / Power BI 仪表板无限吞噬 Tab 键。
  • 富文本编辑器(TinyMCE、旧版 CKEditor)将 Tab 键用于缩进,导致焦点永远无法离开。
  • 自定义组合框中方向键可移动选项,但 Tab 键无效——用户焦点停滞在输入框上。
  • Cookie 横幅的焦点管理持续循环,始终未将焦点移至”接受”/“拒绝”按钮。

自动化工具很难捕获此类问题——axe 和 Lighthouse 只能标记可疑模式。手动键盘测试是唯一可靠的检测方式。

为何重要

键盘陷阱是最严重的无障碍失败之一:用户被困在页面某部分,字面意义上无法离开。盲人用户可能不得不刷新页面,从而丢失会话及所有已填表单数据。对于许多用户而言,这意味着彻底放弃该网站。在所有 WCAG 成功准则中,这条准则最有可能使页面在法律上难以自辩——法院和执法机构将困住用户的行为视为明确的无障碍壁垒。