使用JavaScript/jQuery设置页面顶部键盘Tab焦点或重置焦点的最佳实践

优化无障碍返回顶部焦点管理的最佳实践 #

你当前的方案本质上是利用tabindex="-1"的非交互元素实现程序化聚焦，逻辑本身符合WAI-ARIA规范，只是可以通过复用现有元素、优化执行时序实现更精简的合规方案，不需要额外添加无意义的隐藏DOM节点：

方案1：复用顶部已有可聚焦元素（优先推荐）

你已经在页面最顶部放置了「跳转到内容」的无障碍链接，这本身就是最适合的焦点锚点，不需要额外添加隐藏标签。点击返回顶部后直接聚焦到该链接即可，用户后续按Tab键会从顶部导航开始遍历，完全符合操作预期：

<body>
  <!-- 直接复用已有的跳转到内容链接，不需要新增隐藏节点 -->
  <a class="skip-to-content-link" tabindex="0" href="#main-content">Skip to content</a>
  <!-- 其余页面内容 -->
</body>

调整点击事件逻辑，把聚焦操作放到滚动动画的回调中，避免动画未完成就聚焦导致的屏幕阅读器播报偏移问题：

$("#to_top").on("click", function () {
  $("html, body").animate(
    { scrollTop: 0 }, 
    500,
    function() {
      // 滚动完成后聚焦顶部跳转到内容链接
      $(".skip-to-content-link").focus();
    }
  );
});

方案2：绑定语义化容器元素

如果你的页面顶部没有合适的可聚焦元素，可以给页面根级语义容器添加tabindex="-1"作为焦点锚点，这是WAI-ARIA规范明确允许的用法，不属于hack行为：

<body>
  <!-- 给顶部语义容器添加tabindex="-1"，仅支持程序化聚焦，不会出现在Tab导航序列中 -->
  <header id="page-header" tabindex="-1">
    <!-- 站点logo、导航等头部内容 -->
  </header>
  <!-- 其余页面内容 -->
</body>

对应的JS逻辑：

$("#to_top").on("click", function () {
  $("html, body").animate(
    { scrollTop: 0 }, 
    500,
    function() {
      $("#page-header").focus();
    }
  );
});

关键注意事项

• 不要给<body>或者<html>标签直接设置焦点，部分浏览器和屏幕阅读器对根节点的聚焦支持存在兼容问题
• 聚焦操作必须放在滚动动作完成之后执行，避免出现焦点位置和视口位置不一致的问题
• 不要使用无意义的空节点作为焦点锚点，会增加无障碍解析的冗余信息

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