本文详解如何在嵌套模态框（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）。
通过以上结构化实现，你不仅能解决“焦点逃逸”与“焦点丢失”两大痛点，更能构建出符合国际无障碍标准、具备专业健壮性的模态交互体系——让每一位用户，无论使用键盘、屏幕阅读器或触控设备，都能获得一致、可控、可预测的操作体验。
