本文详解如何在嵌套模态框（modal-1 → modal-2）场景下，通过手动焦点控制与 aria 实践确保键盘用户始终聚焦于当前活跃模态框，防止焦点逃逸至背景页面，并在关闭子模态框后精准恢复父模态框焦点。
本文详解如何在嵌套模态框（modal-1 → modal-2）场景下，通过手动焦点控制与 aria 实践确保键盘用户始终聚焦于当前活跃模态框，防止焦点逃逸至背景页面，并在关闭子模态框后精准恢复父模态框焦点。
在构建符合 WCAG 2.1 和 WAI-ARIA 规范的无障碍 Web 应用时，模态框（modal dialog）的键盘导航行为是关键挑战之一。尤其当出现嵌套模态框（如从主页面打开 Modal-1，再由 Modal-1 触发 Modal-2）时，若未显式管理焦点流，用户将面临两大典型问题：
- ✅ 焦点逃逸：Modal-1 打开后，Tab 键仍可遍历背景页面元素；
- ❌ 焦点丢失：Modal-2 关闭后，焦点未返回 Modal-1，而是跳转至主页面（如 或首个可聚焦元素），破坏操作连续性。
这些问题的本质在于：浏览器默认不自动限制 Tab 导航范围，也不维护模态框间的焦点上下文。因此，必须通过 JavaScript 主动干预焦点逻辑，并辅以语义化 HTML 与 ARIA 属性协同实现。
一、核心原则：遵循 WAI-ARIA 对话框模式
W3C 官方 Dialog Modal 设计模式 明确指出：
- ✅ 使用 role=”dialog” + aria-modal=”true” 声明模态语义（注意：aria-modal=”true” 尚未被所有屏幕阅读器完全支持，需配合焦点锁定）；
- ✅ 为模态框设置 aria-labelledby（指向标题）和 aria-describedby（指向描述）；
- ✅ 模态框打开时，立即捕获焦点到首个可交互元素（如取消按钮或主操作按钮）；
- ✅ 模态框关闭时，同步恢复焦点至触发它的源元素（非硬编码 document.body）。
⚠️ 注意：原生
二、实现焦点围栏（Focus Trap）
焦点围栏指：当用户按 Tab 键到达模态框内最后一个可聚焦元素时，焦点自动循环至第一个；反之，Shift+Tab 到达第一个时循环至最后一个。此逻辑需监听 keydown 事件并阻止默认行为：
function createFocusTrap(modalEl) { const focusableElements = modalEl.querySelectorAll( 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])' ); const firstElement = focusableElements[0]; const lastElement = focusableElements[focusableElements.length - 1]; const handleKeyDown = (e) => { if (e.key !== 'Tab') return; if (e.shiftKey && document.activeElement === firstElement) { e.preventDefault(); lastElement.focus(); } else if (!e.shiftKey && document.activeElement === lastElement) { e.preventDefault(); firstElement.focus(); } }; modalEl.addEventListener('keydown', handleKeyDown); return () => modalEl.removeEventListener('keydown', handleKeyDown); } // 示例：打开 Modal-1 时启用围栏 function openModal1() { const modal1 = document.getElementById('modal-1'); modal1.showModal(); // 若使用 <dialog> // 或 modal1.classList.remove('hidden'); // 若为 div 模态框 modal1.setAttribute('aria-modal', 'true'); modal1.setAttribute('aria-labelledby', 'modal1-title'); // 立即聚焦首个可操作项（如关闭按钮） const firstFocusable = modal1.querySelector('button[data-action="close"]'); firstFocusable?.focus(); // 启动焦点围栏 const cleanupTrap = createFocusTrap(modal1); // 存储 cleanup 函数以便关闭时销毁 modal1.dataset.focusTrapCleanup = cleanupTrap.toString(); // 实际项目中建议用 WeakMap 存储 }三、嵌套模态框的焦点链管理
当 Modal-1 中的某个按钮触发 Modal-2 时，需执行三步操作：
- 暂停 Modal-1 的焦点围栏（避免干扰 Modal-2 内部 Tab 流）；
- 为 Modal-2 启用独立焦点围栏；
- 记录触发 Modal-2 的源元素（sourceElement） —— 此为后续恢复焦点的关键锚点。
// 在 Modal-1 中绑定触发 Modal-2 的按钮 document.querySelectorAll('[data-open-modal="modal-2"]').forEach(btn => { btn.addEventListener('click', function() { const modal2 = document.getElementById('modal-2'); // 记录触发源（用于 Modal-2 关闭后恢复焦点） modal2.dataset.triggerSource = this.id || this.getAttribute('data-id'); modal2.showModal(); modal2.setAttribute('aria-modal', 'true'); modal2.setAttribute('aria-labelledby', 'modal2-title'); // 聚焦 Modal-2 内容 const firstInModal2 = modal2.querySelector('button, input'); firstInModal2?.focus(); // 启用 Modal-2 独立围栏 createFocusTrap(modal2); }); }); // Modal-2 关闭时：恢复 Modal-1 焦点 document.getElementById('modal-2').addEventListener('close', function() { const triggerId = this.dataset.triggerSource; const triggerEl = document.getElementById(triggerId) || document.querySelector(`[data-id="${triggerId}"]`); if (triggerEl) { triggerEl.focus(); // 精准回到触发按钮 } else { // 降级方案：聚焦 Modal-1 内首个可操作元素 const modal1 = document.getElementById('modal-1'); const fallback = modal1.querySelector('button, input'); fallback?.focus(); } });四、重要注意事项与最佳实践
- ? 永远禁用背景交互：除视觉遮罩（
）外，还需为背景区域添加 inert 属性（现代浏览器支持）或 aria-hidden=”true” + tabindex=”-1″ 组合，确保屏幕阅读器忽略背景；
- ? 避免“坏 ARIA”：勿对原生语义化元素（如
- ? 强制跨 AT 测试：在 NVDA + firefox、VoiceOver + Safari、JAWS + chrome 中验证焦点行为，尤其关注移动设备触控模式下的表现；
- ? 封装为可复用 Hook/Class：将 createFocusTrap、openModal、closeModal 抽象为模块，避免重复逻辑（React/Vue 场景可封装为自定义 Hook 或 Composition API）。
通过以上结构化实现，你不仅能解决“焦点逃逸”与“焦点丢失”两大痛点，更能构建出符合国际无障碍标准、具备专业健壮性的模态交互体系——让每一位用户，无论使用键盘、屏幕阅读器或触控设备，都能获得一致、可控、可预测的操作体验。