• 将焦点捕获至对话框内首个可聚焦元素（无需手动 focus()）；
• 限制 Tab 键仅在对话框内部循环（即自然焦点环，非 JS 模拟）；
• 阻断背景内容交互（视觉遮罩 + 逻辑禁用）；
• 支持 Esc 关闭、点击 backdrop 关闭，并在关闭后自动将焦点恢复至触发按钮；
• 设置 aria-modal="true" 和 role="dialog"，并动态管理 aria-hidden 属性。

☰ 菜单



  
导航菜单
  

    
首页
    
关于
    
联系
  
  ✕ 关闭

const drawer = document.getElementById('mobileDrawer');
const openBtn = document.getElementById('openMenuBtn');
const closeBtn = document.getElementById('closeDrawerBtn');

openBtn.addEventListener('click', () => {
  drawer.showModal(); // 自动接管焦点、禁用背景、启用 Tab 循环
  openBtn.setAttribute('aria-expanded', 'true');
});

closeBtn.addEventListener('click', () => {
  drawer.close();
  openBtn.setAttribute('aria-expanded', 'false');
});

// 可选：监听 close 事件统一清理状态
drawer.addEventListener('close', () => {
  console.log('用户已关闭抽屉，焦点已自动返回 openBtn');
});

⚠️ 注意：showModal() 是模态语义的黄金标准。若使用 show()（非模态），则不会禁用背景，也不限制 Tab 流——此时手动实现焦点陷阱反而违反无障碍原则，因为用户本应能自由切换上下文。

❌ 错误认知：试图用纯 CSS/HTML 实现“无 JS 焦点循环”

问题中提到的“非 JS 方式让 Tab 回到第一个元素”，本质上是对模态模式的误解。HTML 和 CSS 无法主动干预焦点流转逻辑：:focus 是状态伪类，tabindex 仅控制可聚焦顺序，但没有任何纯 CSS 或 HTML 属性能够监听 Tab 键按下并重定向焦点。所谓“无 JS 焦点循环”在技术上不可行，也不符合 WCAG 要求——真正的解决方案是交由浏览器通过语义化模态机制（如

  
主页面内容
  此链接不可聚焦、不可点击、对读屏器不可见



  
菜单
  

    
产品
    
价格