本文详解如何利用 <dialog> 元素和 inert 属性构建符合 WCAG 2.1 A 级标准的模态交互组件，重点说明浏览器原生 Tab 循环机制、焦点捕获逻辑及无 JS 实现的边界条件。
本文详解如何利用 `
在构建可访问的模态交互组件（如汉堡菜单抽屉、弹窗提示）时，一个常见误区是认为“Tab 键循环回第一个元素”必须通过 JavaScript 手动监听 keydown 并强制 focus() 实现。实际上，真正的模态行为无需手动循环逻辑——它是浏览器原生保障的无障碍契约，而非开发者需“修补”的功能。
✅ 正确前提：模态 ≠ 可见抽屉，而是语义化焦点隔离
当用户点击汉堡图标展开导航抽屉时，若该抽屉被正确实现为模态上下文（modal context），则浏览器会自动接管焦点流：
- 调用 dialog.showModal() 后，浏览器自动启用焦点陷阱（Focus Trap），即 Tab 键在抽屉内最后一个可聚焦元素后，自然跳转至第一个可聚焦元素（非立即跳转，而是“离开时”循环）；
- 同时禁用背景内容交互：所有外部元素不可聚焦、不可点击、不被屏幕阅读器读取；
- ESC 键、点击 backdrop、调用 close() 均能安全退出，且焦点自动恢复至触发按钮。
这正是 <dialog> 的核心价值：它不是视觉容器，而是语义化运行时上下文隔离器。
<button id="openMenu">☰ 菜单</button>
<dialog id="mobileNav">
<h2>导航菜单</h2>
<nav>
<ul>
<li><a href="/home">首页</a></li>
<li><a href="/about">关于</a></li>
<li><a href="/contact">联系</a></li>
</ul>
</nav>
<button id="closeMenu" aria-label="关闭菜单">✕</button>
</dialog>
<script>
const dialog = document.getElementById('mobileNav');
const openBtn = document.getElementById('openMenu');
const closeBtn = document.getElementById('closeMenu');
openBtn.addEventListener('click', () => dialog.showModal());
closeBtn.addEventListener('click', () => dialog.close());
// 关闭后自动恢复焦点至 openBtn（浏览器内置行为）
dialog.addEventListener('close', () => {
openBtn.focus(); // 显式增强，但非必需
});
</script>⚠️ 注意：showModal() 是关键。仅用 show() 或 CSS display: block 不构成模态——此时 Tab 仍可逃逸，必须依赖 JS 实现焦点陷阱。
立即学习“前端免费学习笔记（深入）”；
❌ 无 JS 的“伪模态”无法真正循环 Tab
若坚持不用 JavaScript（例如纯 CSS 抽屉），可通过 :target 或 details/summary 实现展开效果，但无法满足 WCAG 模态要求：
- :target 方案中，URL 哈希变化不影响焦点管理，Tab 仍可离开抽屉；
- inert 属性虽可禁用外部交互（如 <main inert>），但它不接管焦点流，浏览器不会自动循环 Tab；
- 此时所谓“循环”，实为开发者手动 focus() 的模拟行为，且易因事件时序（如误用 keyup）导致“刚抵达就跳走”的反模式体验。
/* 错误示范：inert 不能替代 showModal() */
main[inert] {
pointer-events: none;
opacity: 0.3;
}
/* ❌ 这不会让 Tab 在抽屉内循环 —— 仅视觉/交互禁用，焦点仍自由逃逸 */✅ 最佳实践：分层实现，按需选择
| 场景 | 推荐方案 | 是否需 JS | 是否满足 WCAG A 级 |
|---|---|---|---|
| 现代浏览器 + 标准模态交互 | <dialog> + showModal() | ✅（仅控制开关） | ✅ 原生支持 |
| 需兼容 IE / Safari < 15.4 | 手动焦点陷阱（keydown + focus()） | ✅（必须） | ✅（需严格实现） |
| 纯展示型抽屉（非阻断式） | details + summary | ❌ | ❌（非模态，不适用） |
? 关键结论：“Tab 自动循环”不是功能，而是模态状态的必然结果。 你不需要写循环代码——你需要确保组件被正确声明为模态（role="dialog" + aria-modal="true" + 焦点捕获），或直接使用 <dialog showmodal>。任何试图在非模态上下文中“模拟循环”的做法，本质是在对抗浏览器的无障碍基础设施，终将导致维护成本飙升与兼容性断裂。
最后提醒：无论采用哪种方案，务必验证以下三点：
- 打开后首个可聚焦元素获得焦点；
- Tab 键在内部元素间线性流动，末尾后回到起点；
- 关闭后焦点回归触发源（如汉堡按钮），且背景内容不可聚焦。
这才是真正面向所有用户的、可持续的模态交互设计。
