摆脱焦点管理的头痛

“顺序焦点导航起始点”功能用于定义在没有焦点区域时,系统从何处开始搜索可聚焦元素以进行顺序焦点导航([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"(并移除焦点轮廓)。

演示

顺序焦点导航起点是对浏览器无障碍功能基元集的有益补充。它易于理解,实际上可以让我们从应用中移除代码,同时改善用户体验。双赢!请查看演示,详细了解此功能。