HTML实现模态框焦点捕获指南

本文深入解析了HTML模态框中实现焦点捕获（trap focus）的必要性与实操细节：由于HTML原生不支持、`

`元素（即使调用`showModal()`）也**不会自动限制Tab键范围**，且Safari等浏览器存在兼容性短板，为满足WCAG 2.1 AA可访问性标准，开发者必须通过JavaScript手动监听`keydown`事件，在用户按Tab键到达模态框首/尾可聚焦元素时，精准阻止默认行为并强制将焦点循环移回对端——文中不仅给出了精简可靠的三步核心逻辑和兼容性处理技巧（如规避`:focusable`伪类、动态更新焦点列表），还直击嵌套模态框、iframe、移动端系统手势等高危边界场景，提供切实可行的兜底方案，是构建真正无障碍Web模态交互不可或缺的实战指南。

什么是焦点捕获（trap focus），为什么必须手动实现

HTML 原生没有 trapFocus 这种机制，模态框打开后键盘 Tab 仍会跳到背景元素，导致可访问性失败。这不是浏览器 bug，而是规范行为——dialog 元素虽支持 showModal()，但旧版 Safari 不支持，且即使支持，也**不自动限制 Tab 键范围**。必须用 JavaScript 主动监听 keydown、判断焦点位置、强制移回首/尾可聚焦子元素。

如何用 JS 实现最小可行的焦点捕获

核心逻辑就三步：记录模态框内第一个和最后一个可聚焦元素 → 监听 keydown → 按 Tab 方向把焦点“拽”回去。注意不是阻止事件，而是 event.preventDefault() 后调用 focus()。

• 只对 tabindex ≥ 0、、、<input>、<select></select>、<textarea></textarea> 等原生可聚焦标签生效
• 用 element.matches(':focusable') 不可靠（Safari 不支持），改用 getComputedStyle(element).visibility !== 'hidden' && getComputedStyle(element).display !== 'none' 辅助过滤
• 首次打开模态框时，**必须主动调用 firstFocusable.focus()**，否则键盘用户无法进入

const modal = document.getElementById('my-modal');
const focusables = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
const first = focusables[0];
const last = focusables[focusables.length - 1];
<p>function handleTab(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();
}
}</p><p>modal.addEventListener('keydown', handleTab);
</p>

用

时还要 trap focus 吗

要。虽然