摆脱焦点管理的头痛

“顺序焦点导航起始点”功能定义在没有聚焦区域时,从何处开始搜索可聚焦元素来实现顺序焦点导航([Tab] 或 [Shift-Tab])。这对于“跳过链接”和管理文档焦点等无障碍功能尤为有用。

HTML 为处理键盘交互提供了大量内置支持,这意味着可以非常轻松地编写可通过键盘使用的页面 - 无论是运动障碍阻碍我们使用鼠标,还是如此高效将手从键盘上移开,都会浪费宝贵的毫秒数。

键盘处理围绕焦点,焦点决定键盘事件将出现在页面中的什么位置。在一些情况下,到目前为止,我们还需要做一些额外的工作,才能让键盘用户能够获得良好的体验。借助 focus() 方法,我们可以有选择地选择要聚焦的元素,以响应用户操作,从而管理焦点。然而,这种最佳做法存在许多问题,并且需要一些棘手的 JavaScript 技巧才能提供基准体验。

虽然这项技术不会很快完全停用,但在 Chrome 50 中,由于采用顺序焦点导航起始点,它在少数情况下必不可少。通过此项更改,精心编撰的网页将会自动变得更容易访问,而无需任何额外的手动焦点管理。下面我们来看一个示例。

以文字为主的网站通常会在同一网页中相互链接,以帮助用户快速跳转到重要版块。

<!-- Table of Contents -->
<a href="#recipes">Recipes</a>
<a href="#ingredients">Ingredients</a>

<!-- Recipes Section -->
<h2 id="recipes">Recipes</h1>
<h3>Vegemite Cheesecake</h3>
<p>
    Vegemite cheesecake is delicious. We promise.
    <a href="cheesecake.html">Read More</a>
</p>

如果我是键盘用户(也很喜欢澳大利亚食物),接下来的一系列操作会是这样:

  • 按两次 Tab 即可将焦点移至“食谱”链接
  • Enter 可跳转到“食谱”部分
  • 再按一次 Tab 即可将焦点移至“了解详情”链接

让我们在 Chrome 49 中看看实际情况。

哦。那可不完全符合计划行事吗?

系统最后按 Tab 将焦点移到了目录中的下一项,而不是聚焦于“阅读全文”链接。这是因为开发者没有在标头上设置 tabindex="-1" 以使其可聚焦。因此,点击 #recipes 已命名的锚点不会移动焦点。有轻微错误,但如果您是鼠标用户,没什么大不了的。不过,如果您是键盘用户或换用设备的用户,不妨采用这种方法。考虑一个典型的维基百科网页上的互联量吗?如果在所有这些锚点之间不断来回切换,那肯定是令人沮丧的!

我们再来看看 Chrome 50 的使用体验。

哇,这正是我们想要的功能,而且最重要的是,我们没有更改代码。浏览器刚刚根据我们在文档中的位置计算出焦点应位于何处。

其运作方式是怎样的?

在实现焦点起点之前,焦点将始终从上一个聚焦的元素或页面顶部移开。这意味着,在选择下一个焦点时,可能需要将焦点移到实际上无法聚焦的对象上,例如容器元素或标题。这会导致各种奇怪的变化,包括如果您恰巧随意点击此类元素,系统会显示聚焦环。

顾名思义,焦点起始点提供了一种机制,可在我们按 TabShift-Tab 时建议从何处开始查找下一个可聚焦元素。

您可以通过多种方式进行设置: 如果某项内容具有焦点,那么它也是焦点导航的起点,就像之前一样。 此外,和之前一样,如果没有其他任何设置焦点导航起始点,那么它将是当前的 document,或当前处于活动状态的 dialog(如果可用且受支持)。如果我们像上例所示导航到某个页面 fragment,它现在将设置焦点起点。此外,如果我们点击页面上的任何元素,无论其是否可聚焦,现在都将设置焦点导航起点。 最后,如果作为焦点起点的元素从 DOM 中移除,其父项就会成为焦点起点。无需再专心致志地击中洞内!

其他用例

除上述示例外,此功能可以在很多其他情况下派上用场。

隐藏元素

有时,用户可能会专注于需要设置为 visibility: hiddendisplay: none 的项。轮播界面中的可点击项就属于这种情况。在旧版 Chrome 中,以这种方式隐藏当前聚焦的项会将焦点重置为默认起点,从而让上述轮播界面成为给运动障碍用户带来困扰的陷阱。使用顺序对焦起点时,不再是这种情况。如果通过上述任一方法隐藏了某个元素,按 Tab 键将会直接移至下一个可设为焦点的项。

跳转链接是不可见的锚点,只能通过键盘访问。它们可让用户“跳过”导航元素以直接跳至网页内容,对于使用键盘和切换设备的用户来说,它们非常有用。如 WebAIM 网站上所述

许多热门网站都实现了跳转链接,尽管您可能从未注意到此类链接。

GitHub.com 上的跳过链接

由于跳转链接被命名为定位点,因此其工作方式与我们原始目录示例相同。

注意事项和支持

目前只有 Chrome 50、Firefox 和 Opera 支持“顺序焦点导航起点”。在所有浏览器均支持该功能之前,您仍然需要向已命名的锚点目标添加 tabindex="-1"(并移除焦点轮廓)。

演示

顺序焦点导航起点是浏览器的无障碍功能基元集的良好补充。它很容易上手,实际上可让我们从应用中移除代码,同时改善用户体验。双倍赢!观看演示,对此功能进行更深入的了解。