Web 可访问性焦点模式（Accessibility Focus Mode） 基础概念 Web 可访问性焦点模式是专为键盘导航用户设计的交互状态，通过锁定焦点在特定界面区域（如模态框、菜单），防止用户意外跳出当前操作流程。它通过 inert 属性或 JavaScript 动态管理焦点边界实现，确保 Tab 键遍历仅限当前活动区域。 技术实现机制 焦点陷阱（Focus Trap） ：通过 document.activeElement 监听焦点位置，当焦点到达区域边界时，自动跳转至区域内的第一个可聚焦元素。 遮罩层覆盖 ：配合半透明遮罩层（overlay）禁用背景内容交互，并通过 aria-hidden="true" 对背景内容进行语义隐藏。 ESC 键退出 ：监听键盘事件，用户按 ESC 键时关闭焦点模式并恢复全局导航。 ARIA 属性协同 使用 aria-modal="true" 声明模态对话框的层级关系，辅助技术（如屏幕阅读器）会限制语音导航范围至该区域，同时朗读 aria-label 描述的上下文目标。 实际应用场景 表单填写流程 ：在多步骤表单中锁定焦点，避免用户误触导航丢失数据。 无障碍菜单 ：下拉菜单展开时，焦点循环在菜单项内，关闭后返回触发按钮。 对话框操作 ：确认弹窗中焦点始终停留在操作按钮组，直至用户做出选择。 开发注意事项 初始焦点需显式设置至区域内的合理起始点（如标题或第一个输入框）。 恢复焦点时需精确返回到触发焦点模式的元素，保持导航连续性。 测试需覆盖屏幕阅读器（NVDA/JAWS）与纯键盘操作的兼容性。