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

每当向页面中添加新内容时,都请尽量确保用户的焦点会指向该内容,以便用户可以对其执行操作。

如何手动测试

单页应用很重要,尤其是在管理用户对新内容的关注方面。

通常,在单页应用中,点击链接不会导致强制刷新。相反,路线更改会提取 <main> 内容区域的新数据。

这对于视力正常的用户来说没有问题。 但是,使用屏幕阅读器或其他辅助技术进行导航的用户可能不知道有新内容已添加到页面中。 系统不会提示他们应导航回 <main> 区域。

发生这种情况时,您需要管理用户的焦点,以使用户的感知上下文与网站的视觉内容保持同步。

修正方法

如需管理用户对网页上的新内容的关注,请在新加载的内容中找到合适的标题,然后将焦点置于新加载的内容上。要实现这一点,最简单的方法是为标题指定 -1tabindex,并调用其 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>

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

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

资源

“用户的焦点被定向到添加到页面的新内容上”这项审核日志的源代码