如何通过document.activeElement高效追踪网页焦点元素，提升无障碍访问体验？

本文共计945个文字，预计阅读时间需要4分钟。

页面刚加载时，所有元素都消失或隐藏，或被卷入视窗之外。

实操建议：

• 不要直接对 document.activeElement 调用 .focus() 或读取 .aria-label，先做存在性判断：

  const el = document.activeElement;<br>if (el && el !== document.body && el !== document.documentElement) {<br> // 安全操作<br>}

• 监听 focusin 事件比轮询更可靠，尤其在单页应用中，路由切换后焦点可能未及时更新
• 若使用 Web Components，需注意 shadowRoot 边界：默认情况下 document.activeElement 不会穿透到 open shadow root 内部，得用 shadowRoot.activeElement

在 React 中安全读取 activeElement 并避免 useEffect 依赖错乱

React 函数组件内直接读 document.activeElement 没问题，但若放进 useEffect 且依赖了某个 ref 或 state，容易因渲染时机导致读到旧值或触发不必要的重运行。