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

每当向网页添加新内容时 尽量确保将用户的注意力吸引到相关内容 以便他们采取行动

如何手动测试

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

通常,在单页应用中,点击链接不会导致硬刷新。相反, 路线更改会针对 <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>

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

另请参阅管理无障碍功能的焦点

资源

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