无法完全重置activeElement到默认位置导致Tab键焦点无法从页面顶部开始如何解决

问题原因 #

你执行document.activeElement.blur()后activeElement回归<body>是正常现象，但没有达到重置Tab顺序的效果，核心原因有两点：

• 浏览器内部独立维护了Tab导航的序列遍历指针，仅将当前元素失焦不会重置这个指针的位置，它会记住上一次有效聚焦的可交互元素位置，下一次按Tab自然从该位置的下一个元素开始跳转
• 默认状态下<body>没有设置tabindex属性，属于不可聚焦元素，哪怕它是当前的activeElement，也不会被Tab导航识别为有效的序列起始点

修复方案 #

下面两种方案均符合无障碍适配规范，可根据业务场景选择：

方案1：完全重置Tab顺序到页面开头（和页面首次加载表现一致） #

这是单页应用内容重渲染、路由切换场景下最常用的实现方案，代码如下：

// 临时将body设为可聚焦
document.body.setAttribute('tabindex', '-1');
// 主动聚焦body，重置浏览器的Tab导航指针到序列开头
document.body.focus();
// 可选：不需要body保留聚焦态可以主动失焦，也可以移除tabindex属性
document.body.blur();
document.body.removeAttribute('tabindex');

执行完成后再按Tab，就会从页面第一个可聚焦元素（链接、按钮、输入框等）开始跳转，和页面刷新后首次按Tab的表现完全一致。

方案2：主动聚焦到内容区首个可交互元素 #

如果重渲染后的内容有明确的首个可交互节点（比如表单的第一个输入框、内容区的第一个操作按钮），可以直接聚焦该元素，更符合屏幕阅读器用户的使用习惯：

// 选择器可根据实际业务调整，匹配所有可聚焦元素
const firstFocusable = document.querySelector('a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
if (firstFocusable) {
  firstFocusable.focus();
}

注意事项 #

• 不要随意给元素设置正数值的tabindex强制调整顺序，会破坏原生DOM的Tab导航逻辑，反而造成无障碍适配问题
• 如果是框架开发场景（比如Angular、React、Vue），将上述逻辑放到内容渲染完成的生命周期回调中执行即可，兼容Chrome、火狐、Safari等所有主流浏览器。

内容的提问来源于stack exchange，提问作者Haradzieniec