如何用原生方案实现模态菜单的 Tab 键焦点循环（无障碍焦点陷阱）

本文详解如何通过 HTML 原生语义与现代 API（<dialog>、inert、aria-modal）构建符合 WCAG 2.1 A 级标准的模态菜单焦点循环，无需手动监听 keydown 实现“Tab 到末尾自动跳回首项”，避免常见 JS 焦点陷阱误用。

本文详解如何通过 html 原生语义与现代 api（`

`、`inert`、`aria-modal`）构建符合 wcag 2.1 a 级标准的模态菜单焦点循环，无需手动监听 keydown 实现“tab 到末尾自动跳回首项”，避免常见 js 焦点陷阱误用。

在构建响应式汉堡菜单（hamburger drawer）等模态导航组件时，一个关键无障碍需求是：当键盘用户按 Tab 键遍历菜单项到达最后一项后，焦点应自然循环回第一项——而非逃逸至页面其他区域，导致视障用户“迷失上下文”。许多开发者误以为必须用 JavaScript 监听 keydown 事件并手动 focus() 跳转，实则这是对模态语义理解的偏差：真正的焦点循环，本质是浏览器在正确模态上下文中自动提供的行为，而非需手写的逻辑。

✅ 正确做法：用语义化模态容器接管焦点流

浏览器原生支持焦点循环的前提，是组件被明确标识为模态（modal）上下文。这可通过以下任一方式实现：

方案一：优先使用 <dialog> 元素（推荐 · 现代标准）

<button id="toggleDrawer">☰ 菜单</button><dialog id="drawerMenu">  <h2>导航菜单</h2>  <ul>    <li><a href="/home">首页</a></li>    <li><a href="/about">关于</a></li>    <li><a href="/contact">联系</a></li>  </ul>  <button id="closeDrawer" aria-label="关闭菜单">✕</button></dialog>

const drawer = document.getElementById('drawerMenu');const toggleBtn = document.getElementById('toggleDrawer');const closeBtn = document.getElementById('closeDrawer');toggleBtn.addEventListener('click', () => drawer.showModal()); // 自动捕获焦点、禁用背景、支持 Esc/backdrop 关闭closeBtn.addEventListener('click', () => drawer.close());

✅ 优势：

• showModal() 自动启用焦点陷阱（focus trap），Tab 键在菜单内自然循环；
• 自动设置 aria-modal="true"、管理 aria-hidden、恢复触发元素焦点；
• 无需手动 tabindex 或事件监听——浏览器原生保障 WCAG 合规性。

方案二：手动模态结构 + inert 属性（兼容旧版 & 非 <dialog> 场景）

若因样式或兼容性需自定义结构（如 div 实现 drawer），请严格遵循模态语义：

<!-- 触发按钮 --><button id="openDrawer">☰ 打开菜单</button><!-- 模态层结构 --><div id="drawerOverlay" class="overlay" hidden>  <nav id="drawerNav" role="dialog" aria-labelledby="drawerTitle">    <h2 id="drawerTitle">主菜单</h2>    <ul>      <li><a href="/products">产品</a></li>      <li><a href="/pricing">价格</a></li>      <li><a href="/support">支持</a></li>    </ul>    <button id="closeDrawerManual">关闭</button>  </nav></div><!-- 主内容区（模态激活时设 inert） --><main id="mainContent">  <h1>网站首页</h1>  <p>……</p></main>

const overlay = document.getElementById('drawerOverlay');const mainContent = document.getElementById('mainContent');const openBtn = document.getElementById('openDrawer');const closeBtn = document.getElementById('closeDrawerManual');openBtn.addEventListener('click', () => {  overlay.hidden = false;  mainContent.inert = true; // ✅ 关键：禁用主内容交互与可访问性暴露  // 浏览器会自动将焦点移入 nav 内首个可聚焦元素（如第一个 <a>）});closeBtn.addEventListener('click', () => {  overlay.hidden = true;  mainContent.inert = false;  openBtn.focus(); // ✅ 关闭后恢复焦点至触发按钮});

⚠️ 注意：inert 是现代标准（Chrome 105+、Firefox 119+、Safari 16.4+），旧浏览器需 polyfill（如 wicg-inert）。若无法使用 inert，则必须手动添加 aria-hidden="true" 并移除所有 tabindex，但 inert 更可靠、更语义化。

❌ 常见错误与风险警示

• 不要仅靠 CSS visibility: hidden 或 display: none 控制可访问性：这些仅影响视觉，屏幕阅读器仍可读取、键盘仍可聚焦。
• 避免手动实现“Tab 循环”逻辑：如监听 keyup 判断焦点位置再 focus() —— 这易引发“抵达即跳转”的 UX 毛病（用户刚 Tab 到最后一项就强制跳走），且违背浏览器原生焦点管理机制。
• 非模态场景禁止焦点循环：若菜单设计为非阻断式（用户可同时操作菜单与页面），则绝不能限制 Tab 流——否则等于创建无法退出的焦点陷阱，违反 WCAG 2.1 2.4.3（Focus Order）与 2.1.2（No Keyboard Trap）。

总结：无障碍焦点循环 = 正确的模态语义 × 浏览器原生能力

要素	正确实践	错误实践
容器语义	<dialog> 或 role="dialog" + aria-labelledby	仅用 div 无任何 ARIA 标注
背景禁用	showModal() 或 inert	仅靠 opacity: 0.2 或 z-index 遮挡
焦点管理	依赖浏览器自动捕获/恢复	手动 focus() + keydown 监听
关闭后焦点	显式调用 triggerButton.focus()	忽略，焦点停留在 body 或丢失

截至 2026 年，主流浏览器已全面支持 <dialog> 与 inert，建议新项目默认采用 <dialog> 实现模态菜单；存量项目可渐进升级，用 inert 替代手工 aria-hidden + tabindex 控制。记住：无障碍不是“附加功能”，而是通过正确语义让浏览器替你完成合规性保障。