实现多层模态框的无障碍键盘导航：聚焦管理与焦点回归的完整实践

本文详解如何在嵌套模态框（modal-1 → modal-2）场景中，通过手动焦点控制与 aria 规范，确保键盘用户始终聚焦于当前活跃模态框，关闭子模态框后精准回归父模态框焦点，满足 wcag 2.1 可访问性要求。

本文详解如何在嵌套模态框（modal-1 → modal-2）场景中，通过手动焦点控制与 aria 规范，确保键盘用户始终聚焦于当前活跃模态框，关闭子模态框后精准回归父模态框焦点，满足 wcag 2.1 可访问性要求。

在构建具备良好无障碍支持（Accessibility）的 Web 应用时，多层模态框（如从页面下拉选择触发 Modal-1，再由 Modal-1 中操作打开 Modal-2）极易引发键盘导航断裂问题：焦点意外逃逸至背景页面、关闭子模态框后焦点丢失或跳转至错误位置。这些问题不仅违反 W3C WAI-ARIA 实践指南，更直接影响视障用户及仅使用键盘操作的用户的可用性。

? 核心原则：焦点围栏（Focus Trap）与焦点回归（Focus Return）

根据 W3C ARIA Authoring Practices Guide (APG) 对话框模式，一个符合标准的模态框必须同时满足两个关键行为：

• 焦点围栏：当模态框打开时，Tab/Shift+Tab 键必须被限制在模态框内部可聚焦元素之间循环，完全禁止焦点进入背景页面；
• 焦点回归：当模态框关闭时，焦点必须精确返回到触发其打开的源元素（例如按钮），而非随意重置或跳至 或 。

⚠️ 注意：原生

元素理论上可自动处理上述逻辑，但截至 2024 年，其跨浏览器焦点围栏支持仍不完善（尤其在 safari 和部分旧版 edge 中），生产环境仍需手动实现。

✅ 实现方案：分步代码示例

1. 创建焦点围栏（Focus Trap）

为每个模态框（#modal-1, #modal-2）添加 focus-trap 逻辑。以下为轻量级实现（无依赖）：

function createFocusTrap(modalElement) {   const focusableElements = modalElement.querySelectorAll(     'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'   );   const first = focusableElements[0];   const last = focusableElements[focusableElements.length - 1];    function handleKeyDown(e) {     if (e.key !== 'Tab') return;     if (e.shiftKey && document.activeElement === first) {       e.preventDefault();       last.focus();     } else if (!e.shiftKey && document.activeElement === last) {       e.preventDefault();       first.focus();     }   }    modalElement.addEventListener('keydown', handleKeyDown);   return () => modalElement.removeEventListener('keydown', handleKeyDown); }  // 启用 Modal-1 的焦点围栏 const modal1 = document.getElementById('modal-1'); const trap1 = createFocusTrap(modal1);  // 启用 Modal-2 的焦点围栏（注意：Modal-1 在 Modal-2 打开时应暂停自身 trap） const modal2 = document.getElementById('modal-2'); let trap2 = null;  function openModal2() {   // 关闭 Modal-1 的 trap（避免干扰）   trap1();   trap2 = createFocusTrap(modal2);   modal2.showModal(); // 或使用 class 切换 + aria-hidden }

2. 精准焦点回归：关闭 Modal-2 后回到 Modal-1 的触发源

关键点在于记录并恢复上下文。推荐在打开 Modal-2 时，将触发它的按钮（或其他元素）作为 data-opener 存储在 Modal-2 上：

<!-- Modal-1 中的按钮 --> <button    type="button"    data-open-modal="modal-2"   data-opener-id="btn-in-modal1" >   打开二级设置 </button>

// 打开 Modal-2 时记录 opener document.addEventListener('click', (e) => {   const btn = e.target.closest('[data-open-modal="modal-2"]');   if (btn) {     modal2.dataset.openerId = btn.id || `opener-${Date.now()}`;     openModal2();   } });  // 关闭 Modal-2 后，聚焦回原始触发器 function closeModal2() {   trap2(); // 清理 trap   const openerId = modal2.dataset.openerId;   const opener = document.getElementById(openerId) || modal1.querySelector('button');   if (opener) opener.focus();   modal2.close(); // 或移除显示类 }

3. ARIA 层面的语义强化（不可省略）

• 每个模态框需有唯一 id 和 role=”dialog”；
• 设置 aria-modal=”true”（显式声明模态行为）；
• 使用 aria-labelledby 指向标题元素，aria-describedby 指向描述内容；
• 背景页面需添加 aria-hidden=”true”（Modal-1 打开时）→ Modal-2 打开时，仅 Modal-1 需设 aria-hidden=”true”，背景页面保持 aria-hidden=”false”（因 Modal-1 本身已是“前台”）；

<!-- Modal-1 --> <div id="modal-1" role="dialog" aria-modal="true" aria-labelledby="modal1-title">   <h2 id="modal1-title">一级设置</h2>   <button id="btn-in-modal1" data-open-modal="modal-2">打开二级设置</button> </div>  <!-- Modal-2 --> <div id="modal-2" role="dialog" aria-modal="true" aria-labelledby="modal2-title">   <h2 id="modal2-title">二级设置</h2>   <button onclick="closeModal2()">确认</button> </div>

? 注意事项与最佳实践

• ✅ 永远不要依赖 autofocus 属性：它仅在首次渲染时生效，无法应对模态框反复开关场景；
• ✅ 聚焦目标必须是可聚焦元素：确保 focus() 调用对象已渲染、未被 display: none 或 visibility: hidden 隐藏，且 tabindex 合法；
• ✅ 屏幕阅读器兼容性：焦点围栏需配合 aria-hidden 动态切换，否则 NVDA/JAWS 仍可能朗读背景内容；
• ⚠️ 避免“焦点跳跃”体验：关闭 Modal-2 后若 Modal-1 已失焦，应优先聚焦其首个逻辑操作项（如“取消”按钮），而非强制聚焦标题（非交互元素）；
• ? 务必全链路测试：使用真实键盘 + NVDA / VoiceOver + chrome/firefox/Safari 组合验证 Tab 流、Enter 操作、ESC 关闭、焦点路径是否连贯。

遵循以上结构化实现，即可在复杂嵌套模态场景中，构建真正健壮、合规、用户友好的无障碍交互体验——让每一次 Tab 键按下，都成为可控、可预期、可信赖的操作旅程。