Chrome Dev Summit 2018 is happening now and streaming live on YouTube. Watch now.

焦点简介

在本节课中,我们将谈论焦点以及如何在应用中对其进行管理。 焦点是指当前屏幕上的哪个控件(字段、复选框、按钮或链接等输入项)接收来自键盘的输入以及在您粘贴内容时接收来自剪贴板的输入。

非常适合从它入手了解无障碍功能的相关信息,因为我们都知道如何使用键盘,便于建立起联系和进行测试,并且可令几乎所有用户受益。

运动缺陷(可能是永久性瘫痪到腕关节扭伤等不同程度的缺陷)用户可能依赖键盘或开关设备进行页面导航,因此采用适当的焦点策略对向他们提供良好体验至关重要。

而对于熟知计算机上每一个键盘快捷键的高级用户,只使用键盘就能快速进行网站导航无疑可以提升他们的工作效率。

因此,精心实现的焦点策略可以确保每一位使用您的应用的用户获得更好的体验。 我们将在即将开始的几节课中了解到,您在焦点上投入的精力是为辅助技术用户(实际上也是为所有用户)提供支持的重要基础。

什么是焦点?

焦点决定在任何给定时刻页面中键盘事件的去向。例如,如果您在聚焦某个文本输入字段后开始键入内容,该输入字段将接收键盘事件并显示您键入的字符。它获得焦点期间,还会接收来自剪贴板的粘贴输入。

文本字段中的键盘焦点

当前聚焦项通常使用聚焦环指示,其样式既取决于浏览器,也取决于页面制作者应用的任何样式设置。例如,Chrome 通常使用蓝色边框突出显示聚焦的元素,而 Firefox 则是使用虚线边框。

注册按钮

一些用户几乎全靠键盘或其他输入设备来操作计算机。 对这些用户而言,焦点至关重要,因为这是他们到达所有屏幕元素的主要途径。 因此,Web AIM 检查清单才会在其第 2.1.1 节中指出,所有页面功能应该都能使用键盘来执行,除非是手绘图这种无法使用键盘执行的操作。

作为用户,您可以使用 TabShift+Tab 或箭头键来控制当前聚焦的元素。 在 Mac OSX 上,控制方式略有不同:尽管 Chrome 始终允许您使用 Tab 进行导航,但在 Safari 等其他浏览器中更改焦点时,您需要按 Option+Tab。(您可以在 System Preferences 的 Keyboard 部分更改此设置。)

键盘首选项对话框

通过按 Tab 键让焦点在交互式元素中正向和反向跳转的顺序叫做 Tab 键顺序,这并不奇怪。 确保您设计的页面具有符合逻辑的 Tab 键顺序是一个重要步骤,我们将在稍后进行介绍。

什么是可聚焦?

文本字段、按钮和选择列表等内置的交互式 HTML 元素是隐式可聚焦元素,这意味着它们是自动插入到 Tab 键顺序中,并且内置了键盘事件处理,无需开发者进行干预。

隐式可聚焦字段

但并非所有元素都是可聚焦元素;在您按 Tab 键在页面上循环跳转时,段落、div 以及各种其他页面元素不会获得焦点,这是设计使然。一般不需要聚焦无法与用户进行交互的元素。

并非所有元素都是可聚焦元素

体验焦点

让我们上手尝试一些刚讨论过的聚焦方法。使用 Chrome 访问此航空公司网站模型页面,然后只靠键盘输入查找特定机票。该页面不接受鼠标输入,因此您无法篡改练习(可不是我们不信任您哟 ;-))。

航空公司网站模型

您应该指定的机票参数如下:

  • 单程
  • 目的地墨尔本
  • 去程日期 2017 年 10 月 12 日 (10/12/2017)
  • 返程日期 2017 年 10 月 23 日 (10/23/2017)
  • 靠窗座位
  • 不想接收促销优惠信息

当您没有任何输入错误地成功完成表单并激活 Search 按钮时,表单将完全清空并重置。 继续完成表单,然后返回。

让我们看看表单是如何使用您的键盘输入的。从您的前几次按下 Tab 键开始,浏览器会突出显示 Flights、Hotels 和 Rental Cars 导航项。如果您继续按 Tab 键,将会跳转到单选按钮组,您可以使用箭头键从 Round Trip、One Way 或 Multi City 中做出选择。

继续跳转到姓名和地址字段,填写所需信息。 当您到达目的地选择元素时,可以使用箭头键选择城市,也可开始键入内容以自动填充该字段。同理,在日期字段中,您同样可以使用箭头键或直接键入日期。

选择座位类型也要依赖箭头键,您也可以键入“w”、“a”或“n”跳转到相应的座位选项。 然后,您可以在促销优惠信息复选框获得焦点时按空格键禁用接收促销优惠信息的默认选择。 最后,聚焦 Search 按钮,并按 Enter 提交表单。

只使用键盘与表单进行交互非常方便,因为不需要切换到鼠标再切换回键盘就能完成任务。 由于表单中使用的所有元素都是具有隐式焦点的原生 HTML 标记,因此表单能够与键盘进行顺畅的交互,您不必编写任何代码来添加或管理聚焦行为。