HTML inert 如何管理模态层焦点：inert、aria-hidden 与恢复焦点

模态层打开后，如果键盘用户还能 Tab 到背景按钮，问题通常不在遮罩颜色，而在页面没有切换交互状态。一个可靠的实现要同时处理三件事：让背景变成 inert，把焦点送进对话框，关闭后再回到原来的触发按钮。

把背景交互交给 inert，把模态语义交给 dialog 和 aria-modal，把焦点进出交给 JavaScript；三者缺一不可。

先把模态层的三个状态分开

以“删除草稿”为例，页面初始状态是列表可操作、删除按钮拥有焦点。点击后，背景列表应该停止响应，焦点进入对话框；用户确认或取消后，对话框消失，焦点回到删除按钮。这里的状态变化不是一层 CSS 遮罩能完成的。

• 关闭态：main.inert 为 false，触发按钮可操作。
• 打开态：main.inert 为 true，dialog.showModal() 显示对话框。
• 恢复态：closeModal 关闭对话框，trigger.focus() 恢复键盘位置。

打开时让背景真正停止响应

页面结构把主内容和对话框放在同一层。打开动作先记住当前焦点，再设置 main.inert，最后调用 dialog.showModal()。这条顺序能避免对话框已经出现、背景却短暂可操作的窗口。

删除草稿
确认删除
  
删除后不能从列表恢复。
  取消
  确认删除

把控制流压缩成三个真实节点，就是 openModal → main.inert → dialog.showModal。图中只画这条关系，代码则负责完整语法和事件细节。

组件实现：焦点进入、确认和取消都走同一条出口

打开前保存 lastFocused，优先聚焦取消按钮，让用户有一个安全的默认出口。确认和取消都调用 closeModal，不要让两个分支分别维护背景状态，否则很容易出现取消路径忘记解除 inert 的问题。

const main = document.querySelector('#main');
const dialog = document.querySelector('#delete-dialog');
const trigger = document.querySelector('#delete-trigger');
const cancel = document.querySelector('#cancel');
const confirm = document.querySelector('#confirm');
let lastFocused = null;

function openModal() {
  lastFocused = document.activeElement;
  main.inert = true;
  dialog.showModal();
  cancel.focus();
}

function closeModal() {
  dialog.close();
  main.inert = false;
  if (lastFocused instanceof HTMLElement) {
    lastFocused.focus();
  }
}

trigger.addEventListener('click', openModal);
cancel.addEventListener('click', closeModal);
confirm.addEventListener('click', () => {
  // 真实项目中先提交删除，再在成功回调里关闭
  closeModal();
});

这个例子没有手写 Tab 循环，因为原生模态 dialog.showModal() 已经提供了模态呈现能力。业务代码的职责是维护背景状态、初始焦点和恢复焦点。

可访问性检查不能只看 aria 属性

aria-modal="true" 告诉辅助技术当前是模态范围，但它本身不改变页面功能。需要手工检查以下可见结果：

• 打开后，Tab 顺序不会落到主内容的链接和按钮。
• 屏幕阅读器能读出“确认删除”标题，标题由 aria-labelledby 关联。
• 按取消或完成操作后，焦点回到原触发按钮，而不是跳到页面顶部。
• 关闭动作不会把 main.inert 留在 true，刷新前的页面也能继续操作。

不要把 aria-hidden="true" 当成 inert 的替代品。它主要影响辅助技术暴露，不能阻止鼠标点击，也不能阻止键盘焦点进入背景。

性能和边界状态：少做全页面焦点扫描

使用 inert 的好处是把“背景不可交互”交给浏览器处理，不必每次打开对话框都查询所有可聚焦元素、保存 tabindex、关闭时再逐个还原。对常规页面，直接切换主容器的布尔属性就足够。

有几个边界要单独处理：

• 触发按钮可能在确认后被删除，恢复焦点前先判断节点仍在文档中；不存在时，把焦点放到列表容器或新的结果提示。
• 对话框打开期间不要再叠加第二个模态层；如果业务必须嵌套，应明确保存一组焦点栈。
• 对话框内的异步提交失败时保持打开，让错误消息紧邻表单并可被读到。
• 不要给对话框自己设置 inert，否则用户会得到一个看得见但无法操作的空壳。

相关问题

inert 和 disabled 有什么区别？

disabled 适合单个表单控件；inert 适合一整块内容及其后代，让链接、按钮和文本选择一起失效。

用了 aria-modal 还需要 JavaScript 吗？

需要。aria-modal 只提供语义边界，焦点进入、退出和背景交互仍然要由原生 dialog 或 JavaScript 管理。

为什么关闭后焦点会丢失？

常见原因是没有保存触发元素，或触发元素已被删除。关闭路径应统一经过 closeModal，并为节点不存在准备后备焦点。

把验收点留在代码旁边

模态层的完成标准不是“遮罩出现了”，而是打开、操作、关闭三个状态都可验证：背景不能抢焦点，对话框有清晰名称，异常不会把用户困住，正常关闭能回到触发位置。这样做出来的组件，换一套 CSS 视觉风格也不会破坏键盘操作。