焦点简介

无障碍功能中的屏幕焦点概览

戴夫·加什
Dave Gash
梅金·卡尼
Meggin Kearney

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

这里是开始学习无障碍功能的好地方,因为我们都知道如何使用键盘,键盘易于建立情感联系和测试,并且几乎可以使所有用户受益。

有运动障碍(可能是永久性瘫痪到手腕扭伤等各种身体缺陷的用户)可能会依赖键盘或开关设备来浏览您的网页,因此制定有效的专注策略对于为其提供良好的体验至关重要。

对于知道计算机上每个键盘快捷键的高级用户,仅使用键盘即可快速浏览您的网站无疑可以提高他们的工作效率。

因此,精心实现的焦点策略可确保使用您应用的每位用户获得更好的体验。在接下来的几节课中,我们将发现,您在焦点上付出的努力是为辅助技术用户(实际上也是为所有用户)提供支持的重要基础。

什么是焦点?

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

键盘焦点位于文本字段中。

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

“注册”按钮。

一些用户几乎完全使用键盘或其他输入设备来操作计算机。对此类用户而言,焦点至关重要,因为这是他们接触所有屏幕内容的主要方式。因此,Web AIM 核对清单在第 2.1.1 节中指出,所有页面功能都应该可以通过键盘使用,除非这是键盘无法使用的功能,例如手写绘图。

作为用户,您可以使用 TabShift+Tab 或箭头键来控制当前聚焦的元素。在 Mac OSX 上,运作方式略有不同:虽然 Chrome 始终允许您使用 Tab 进行导航,但您需要按 Option+Tab 才能在其他浏览器(例如 Safari)中更改焦点。(您可以在“系统偏好设置”的“键盘”部分更改此设置。)

键盘偏好设置对话框。

通过 Tab 让焦点在交互式元素中向前和向后移动的顺序称为 Tab 键顺序(并不奇怪)。确保您设计页面时按照符合逻辑的 Tab 键顺序是一个重要步骤,我们稍后会在后面介绍。

什么是可聚焦?

文本字段、按钮和选择列表等内置互动式 HTML 元素隐式可聚焦,这意味着这些元素会自动插入到标签页顺序中,并内置了键盘事件处理功能,无需开发者干预。

隐式可聚焦字段。

但并非所有元素都是可聚焦的;当您按 Tab 键浏览网页时,段落、div 和各种其他页面元素都不会聚焦,这是设计使然。如果用户无法与某些内容互动,则通常不需要聚焦某些内容。

并非所有元素均可聚焦

正在突出焦点

我们来尝试刚刚讨论过的一些焦点技术。使用 Chrome 访问此航空公司网站模型页面,然后仅使用键盘输入搜索特定机票。该页面不接受鼠标输入,因此您无法篡改练习(并非我们不信任您;-)。

航空公司网站模型。

您应指定的票券参数如下:

  • 单程
  • 飞往墨尔本
  • 出发时间:2017 年 10 月 12 日 (10/12/2017)
  • 返程日期为 2017 年 10 月 23 日 (10/23/2017)
  • 靠窗座位
  • 不想接收促销优惠

如果您在无输入错误的情况下成功完成表单并激活“搜索”按钮,表单将会直接清除并重置。继续填写表单,然后再返回。

让我们来看看表单是如何使用键盘输入的。从前几次按下 Tab 开始,浏览器会突出显示“航班”、“酒店”和“租车”的导航项。继续按 Tab 键可前往单选按钮组,您可以使用箭头键从“往返”“单行”或“多城市”中选择。

继续浏览名称和地址字段,填写所需信息。到达目的地选择元素后,您可以使用箭头键选择城市,也可以开始输入内容以自动补全该字段。同样,在日期字段中,您可以使用箭头键或直接输入日期。

选择座位类型也需要使用箭头键,您也可以输入“w”、“a”或“n”跳转到某个座位选项。然后,您可以在相应复选框获得焦点时按空格键,以停用促销优惠默认设置。最后,将焦点移至“搜索”按钮,然后按 Enter 提交表单。

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