专注于焦点样式

并非所有人都使用鼠标来浏览互联网。 如果你正在智能手机上阅读这篇文章，这很明显！ 还值得指出的是，人们使用其他形式的输入来完成任务。 这些输入形式需要焦点样式。

人

人很复杂。 我们并不一定总是以一致的方式执行相同的行为，也不总是做出从局外人的角度来看有意义的决定。 有时，我们甚至会做一些事情，只是为了……做一些事情。 我们很容易感到厌倦：摆弄、戳戳和探测东西，以根据我们的需求对其进行自定义，而不管其最初的意图。

人也是凡人。 我们会生病和受伤。 有时两者兼而有之。 有时会持续一小段时间，有时会是永久性的。 无论如何，这意味着我们有时无法按照我们习惯的方式做我们想做或需要做的事情。

人们也生活在世界上。 有时，我们会置身于一个环境中，外部因素会合谋阻止我们按照我们习惯的方式做某事。 你有没有在假期被困在你父母的家里，不得不使用他们那台古老但仍然可以使用台式电脑？ 就像那样。

输入

鼠标和触摸输入都提供互动指示器。 对于触摸，这是显而易见的：你的手指充当连接你的思维与屏幕上你想激活的项目的桥梁。 对于鼠标，光标充当你的手指的代理。

但是，这些并不是我们唯一可用的输入形式。 键盘无处不在，几乎可以完成鼠标或触摸输入可以完成的任何操作，只要你知道按正确的键的顺序。 有时它甚至比使用鼠标更容易、更快！

想想你上次使用剪切、复制、粘贴和保存功能是什么时候。 也许是您上次使用电子表格时？ 您是否在鼠标和键盘输入之间切换，以尽可能高效地完成任务？ 您可能没有再考虑这种行为，但它是一个很好的例子，说明了为了最佳地完成目标而即时切换输入。 哎呀，也许您甚至在这个毫无意义的任务中花了一些“我时间”，在智能手机上戳了 Facebook 上的“喜欢”按钮。

如果您难以使用双手，可以使用其他选择：魔杖、棍子、开关、吸管和吹气装置、语音识别和眼球追踪技术 都可以在数字系统中创建输入。 这些设备将 **识别** 内容区域并 **激活** 它。 这类似于您如何在键盘上按 Tab 键，电子表格中的下一个单元格会被突出显示，表明它已被移动到该单元格并已准备好进行编辑。

在此视频中，视频编辑和无障碍顾问 Christopher Hills 演示了 Switch Control 的功能，该软件可以帮助有运动控制障碍的人使用 硬件开关 操作他们的计算设备。

值得指出的是，您可能有一天会依赖这项技术，即使只是短暂的一段时间。 也许您在一次不幸的山地自行车事故中摔断了双臂，并且想在康复期间订购一些自怨自艾的外卖。 也许您正在开车，并且想安全地给家人发短信。 或者 也许您只是变老了。 不难想到其他例子，只是人们不喜欢沉迷于这个概念。

如果它是交互式的，它需要一个焦点样式

我们无法始终知道谁在访问我们的网站和网络应用程序，他们为什么访问，他们到达那里后会做什么，他们正在经历什么条件，他们正在感受什么情绪，或者他们可能使用什么输入。 分析可能会提供一些见解，但并不能描绘出完整的画面。 基于此有限信息的快照来优化整个体验将是愚蠢的。

同样重要的是要知道，并非所有使用辅助技术的人都希望被 识别为辅助技术用户。 也不应该强迫他们披露这一点。 电力用户——那些利用键盘快捷键、专业软件和浏览器扩展的人——可能看起来像辅助技术用户一样导航，但他们可能并没有经历任何残疾状况。 再次说明，人很复杂！

我们 *可以* 做的是提前提供对每个人都有效的体验，无论其能力或情况如何。

识别和激活

:focus

使用这些替代的输入形式，我们如何识别某些东西以表明它可以被激活？ 幸运的是，CSS 处理了这个问题——我们使用 :focus 和 :active 选择器。

语法很简单。 想在用户将焦点放在链接上时用橙色描边链接？ 以下是描述方法

a:focus {
  outline: 3px solid orange;
}

当有人导航到链接时，无论通过点击或轻触，通过键盘输入进行制表，或者使用开关输入突出显示它，都会出现此描边。

一个常见的误解是，焦点样式只能使用 outline 属性。 值得注意的是，:focus 是一个选择器，与其他选择器一样，这意味着它接受所有范围的 CSS 属性。 我喜欢使用背景颜色、下划线和其他不调整组件当前大小的技术，这样就不会在激活选择器时改变页面布局。

然后假设我们想在激活链接时删除链接的下划线，以传达 状态的转变。 请记住：链接使用下划线！

a:active {
  text-decoration: none;
}

确保状态发生变化，从 *静止* 到 *聚焦* 到 *激活*，是不同的。 这意味着与组件的其他状态相比，每次转换都应该是唯一的，允许用户理解发生了更改。

我们还希望确保这些状态更改不依赖于颜色，以最好地适应有色盲和/或视力低下的人。 以下是仅使用颜色的状态更改可能对患有红绿色盲症的人的外观。

我故意在视频中从链接中删除了下划线和浏览器的原生焦点环，以更好地说明可发现性的问题。 当尝试在页面周围进行制表以确定哪些是交互式的时，并不立即清楚存在链接。 如果色盲也是一个因素，则悬停时的状态更改将不明显——在增加白内障后，这将更加明显。

:focus-within

:focus-within——一个焦点相关的伪类选择器，具有非常禅宗的名称——可以在其子元素之一获得焦点时将样式应用于父元素。 焦点事件冒泡，直到遇到一个 CSS 规则，要求它应用其样式指令。

此选择器的常见用例是在表单的某个输入元素获得焦点时，将样式应用于整个表单。 在下面的示例中，我在稍微放大整个表单的大小，除非用户表达了对 简化动画体验 的愿望。

查看 CodePen 上 Eric Bailey (@ericwbailey) 创建的笔 :focus-within Demo。

此选择器仍然 相对较新，因此我相信随着时间的推移，我们会看到 更巧妙的应用。

政治

人们也有自己的观点。不幸的是，有时这些观点是无知的。在可访问性实践之外，普遍认为焦点样式“丑陋”，许多设计师和开发人员为了追求感知的美学而删除它们。有时他们甚至没有意识到自己在传播他人的观点——许多CSS 重置包含对焦点样式的全面删除，并被作为基础项目依赖项整合，毫无疑问。

这个决定排除了人们。网站和网络应用程序不是要放在 Dribbble 个人资料上，没有上下文地展示的剪裁奖杯，也不是放在光滑的企业销售演示文稿上的静态截图。它们的存在是为了阅读和采取行动，而且有规则可以帮助确保尽可能多的人能够做到这一点。

:focus-visible

事实是，有时人们会坚持删除焦点样式，并且有足够的权力强迫他们的同僚执行他们的愿景。这与规定焦点机制必须可见的规则相冲突，因为网站要真正地可访问。为了解决这个问题，我们有:focus-visible 伪选择器。

:focus-visible 伪选择器样式在浏览器确定焦点事件发生时生效，并且用户代理启发式方法通知它正在使用非指针输入。这是一种花哨的说法，即它在通过鼠标光标或手指轻触以外的输入激活时显示焦点样式。

此CodePen 的视频演示了如何根据链接接收的输入类型应用不同的样式。当通过鼠标输入悬停和点击链接时，它的下划线被移除并稍微向下移动。当通过键盘输入切换到它时，:focus-visible 会为链接应用醒目的背景颜色。

Chromium 最近宣布了其实施 :focus-visible 的意图。虽然浏览器支持目前非常有限，但有一个 polyfill 可用。它和 :focus-within 都在选择器级别 4 编辑草案中，因此很可能在不久的将来在主要浏览器中获得原生支持。

你可能知道 :focus-visible 的另一个名字，:-moz-focusring。这个供应商前缀伪选择器是 Mozilla 对这个想法的实现，比 :focus-visible 提案早了七年。与其他供应商前缀 CSS 不同，我们不必担心自动前缀支持！Firefox 同时支持 :focus-visible 声明和 :-moz-focusring，确保两个浏览器之间选择器名称一致。

前进一小步，后退一小步

浏览器支持有点麻烦——网络不仅仅是 Chrome 和 Firefox。虽然 polyfill 可以在没有原生支持的地方提供支持，但它是额外的数据要下载、额外要维护的复杂性以及额外要添加到你的有效载荷的脆弱性。

还有一个事实是，与过去相比，设备对输入类型的区分要少得多。Surface 是微软的旗舰计算机，它开箱即用地提供键盘、触控板、手写笔、摄像头、语音和触摸功能。WebAIM 的 2017 年屏幕阅读器调查显示，移动设备可能比你想象的更多地使用键盘输入。启发式方法很好，但就像分析一样，可能无法描绘完整的画面。

另一个需要考虑的点是，焦点样式对于鼠标用户来说可能是可取的。它们的存在清楚地表明了交互性，这对视力障碍者、认知问题以及技术水平较低的人来说是一个很好的辅助功能。那些技术水平极高的人，他们理解屏幕阅读器和键盘快捷键本质上是Vim 的 GUI 版本，会希望在使用键盘在屏幕上跳舞时，焦点状态能够清晰地显示出来。

构建一个强大、有弹性的网络的一部分是构建在所有浏览器中都能正常运行的核心体验。原生的 :focus 选择器享有广泛而深入的支持，以至于可以肯定地说，即使是奇特的浏览器也会支持它。

世界上充满了有些人可能认为很丑陋，而另一些人则认为很美丽的东西。就我个人而言，我不认为焦点样式很碍眼。作为一名设计师，我认为这是创建成熟的设计系统的一个基础部分。作为一名开发人员，描述状态仅仅是常规操作。作为一个人，我喜欢帮助保持网络开放和可访问，就像它最初的意图一样。

---

如果你想了解更多关于这个主题的信息，UX 设计师Caitlin Geier 有一篇关于焦点指示器的很棒的文章。