ARIA dialog 实现可访问弹窗的焦点管理

ARIA dialog 做到可访问，关键不是给弹窗加一个 role="dialog" 就结束，而是把焦点路径补完整：打开时把焦点移入弹窗，按 Tab 时不能跑到背景页面，按 Escape 可以关闭，关闭后焦点回到原来的触发按钮。下面用一组原生 HTML、CSS 和 JavaScript 实现这四个动作。

• 语义：弹窗容器使用 role="dialog" 和 aria-modal="true"，并关联可见标题。
• 进入：保存打开按钮，弹窗显示后把焦点放到关闭或第一个合适的控件。
• 停留：Tab、Shift+Tab 只在弹窗内部的可聚焦元素之间循环。
• 退出：Escape 和关闭按钮都走同一个关闭函数，并恢复触发按钮的焦点。

先把 dialog 的语义和边界写清楚

弹窗标题应该是可见文本，并通过 aria-labelledby 绑定到容器。模态弹窗再声明 aria-modal="true"，表示辅助技术应把弹窗外的内容视为暂时不可操作。这个属性不会自动替你实现键盘焦点循环，所以焦点管理仍然需要脚本或直接采用浏览器的原生对话框能力。

下面的示例只保留一个确认按钮和一个取消按钮，内容少，便于观察焦点顺序：

删除草稿

打开时把焦点送进弹窗

打开动作首先记录当前触发按钮，随后移除 hidden 并把焦点放到关闭或取消控件。记录触发按钮很重要，因为弹窗可能由列表中不同的按钮打开，关闭时不能写死某一个返回目标。

为了让示例便于直接复制，下面把焦点查询、打开和关闭集中到一个脚本中：

const opener = document.querySelector('#openDialog');
const dialog = document.querySelector('#confirmDialog');
const cancelButton = document.querySelector('#cancelDialog');
let lastFocusedElement = null;

const getFocusable = () => [...dialog.querySelectorAll(
  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
)];

function openDialog() {
  // 记录触发来源，关闭时把键盘路径送回原按钮。
  lastFocusedElement = document.activeElement;
  dialog.hidden = false;
  cancelButton.focus();
}

function closeDialog() {
  // 统一从一个出口关闭，避免 Escape 和按钮产生不同的焦点结果。
  dialog.hidden = true;
  if (lastFocusedElement instanceof HTMLElement) {
    lastFocusedElement.focus();
  }
}

opener.addEventListener('click', openDialog);
cancelButton.addEventListener('click', closeDialog);
document.querySelector('#confirmDelete').addEventListener('click', closeDialog);

让 Tab 循环并用 Escape 关闭

焦点陷阱只需要处理两个边界：正向 Tab 从最后一个元素回到第一个，反向 Shift+Tab 从第一个元素回到最后一个。事件监听放在 dialog 容器上，这样弹窗关闭后不会继续拦截页面上的键盘操作。

dialog.addEventListener('keydown', (event) => {
  // Escape 是模态弹窗的明确退出路径。
  if (event.key === 'Escape') {
    event.preventDefault();
    closeDialog();
    return;
  }

  if (event.key !== 'Tab') return;

  const focusable = getFocusable();
  if (focusable.length === 0) {
    // 没有可聚焦控件时阻止焦点逃到背景页面。
    event.preventDefault();
    return;
  }

  const first = focusable[0];
  const last = focusable[focusable.length - 1];
  if (event.shiftKey && document.activeElement === first) {
    event.preventDefault();
    last.focus();
  } else if (!event.shiftKey && document.activeElement === last) {
    event.preventDefault();
    first.focus();
  }
});

几个容易漏掉的焦点边界

第一，不能只监听关闭按钮的点击事件；键盘用户通常会用 Escape，屏幕阅读器用户也需要明确的关闭控件。第二，弹窗中没有可聚焦元素时，至少要阻止 Tab 逃出并考虑把容器设置为可聚焦的兜底节点。第三，动态生成多个弹窗时，每个实例都要保存自己的触发来源，不能使用一个全局按钮引用覆盖前一个实例。

如果项目可以使用原生

常见问题

只加 aria-modal="true" 能自动锁住 Tab 吗？

不能。它表达模态语义，但不会替你实现焦点陷阱、Escape 关闭或焦点返回。

关闭后焦点为什么要回到打开按钮？

这样键盘用户能回到原来的任务上下文；如果焦点留在已隐藏的弹窗里，下一次按键可能落到不可见节点。