将用户的焦点定向到添加到页面中的新内容

每当有新内容添加到网页时，请尽量确保用户的焦点会转到相应内容，以便他们可以对其执行操作。

如何手动测试

单页应用需要进行测试，尤其是在管理用户对新内容的注意力时。

通常，在单页应用中，点击链接不会导致强制刷新。而是会为 <main> 内容区域提取新数据。

使用屏幕阅读器或其他辅助技术导航的用户可能不知道网页中添加了新内容。没有任何提示表明用户应返回 <main> 区域。

在这种情况下，您需要管理用户的焦点，以便让用户的感知上下文与网站的视觉内容保持同步。

解决方法

如需管理用户对网页上的新内容的关注，请在新加载的内容中找到一个合适的标题，并将焦点定向到该标题。若要实现这一点，最简单的方法是将 tabindex 设为 -1，并调用其 focus() 方法：

<main>
  <h2 tabindex="-1">Welcome to your shopping cart</h2>
</main>
<script>
  // Assuming this gets called every time new content loads...
  function onNewPage() {
    var heading = document.querySelector('h2');
    heading.focus();
    // You can also update the page title :)
    document.title = heading.textContent;
  }
</script>

辅助技术会读出新标题及其包含的主要地标区域。

资源

用户的焦点会转移到页面中添加的新内容审核的源代码