如何设计网页的焦点样式一

我想分享这篇关于设计易访问的焦点指示器的指南，因为焦点样式是我和大多数项目的设计师们经常讨论的话题，所以我认为提供这篇指南作为一个有用的参考会很有帮助。这本指南的目标读者既包括希望了解用于设计重点指标的可访问性考虑的设计人员，也包括希望实现这些指标的开发人员。

假设您访问一个网站，想要浏览其中的某些内容。你想买点东西，或者在什么地方订个机票。当你把光标移动到页面上时，它会突然消失。你的手可能还在鼠标上，你在屏幕上移动鼠标，但是你看不到它在哪里。您可能在任何时候都在链接、按钮或任何其他窗体控件上悬停，也可能没有。但是如果你在其中一个上面徘徊，你不知道它是哪一个。你可以尝试点击然后找出答案，但是你可能已经能够想象你将要进入的是一场噩梦般的经历。

不幸的是，键盘用户经常以同样令人沮丧的方式体验网络。它们相当于鼠标光标，通常隐藏在太多的网站上，使它们几乎不可能浏览这些网站。键盘用户的鼠标等价物是焦点指示器。通过设计和实现可访问的焦点指示器，我们可以使我们的产品对键盘用户，以及通过键盘或模拟键盘功能，如语音控制，开关控制，嘴棒，和头棒的辅具用户可访问，举几个例子。

焦点指标到底是什么？

键盘用户通常通过按tab键来浏览网站。这允许它们从页面上的一个交互式元素跳转到另一个元素。

就像鼠标用户一样，他们需要在浏览页面时能够看到自己在页面上的位置，否则他们无法识别与之交互的元素。这就是焦点指标的作用。

焦点指示器是一个可视指示器，用于”突出”当前焦点元素。这个视觉指示器通常以元素周围的轮廓来表示。因为CSS中的每个元素都是一个矩形，所以大纲通常是一个围绕元素绘制的矩形。

使用键盘浏览MozillaDeveloperNetwork网站。当你选项卡通过首页，你可以看到一个矩形大纲突出当前重点的元素。

焦点指示器也可以采取其他形式，但大纲是非常常见的原因有几个。与其他视觉指示符(例如边框或背景颜色)相比，轮廓具有优势，因为它们可以应用于元素，而不会对该元素造成任何重大更改。由于大纲不是元素框模型的一部分，它不会影响该元素的布局，因此在应用时不会引起任何布局变化。(这也是为什么在可视化和调试布局时轮廓比边框更受欢迎的原因)除此之外，轮廓被保留并在强制颜色模式中使用，比如Windows高对比度模式，在这种模式中，用户和系统样式通常会覆盖背景颜色、边框颜色和框阴影。

因此，焦点指示器允许键盘用户在任何给定时刻准确地看到他们在哪里。没有它，他们不会知道他们在一个页面上的位置，他们不能导航页面和操作它的控件。

焦点指示器对于键盘用户就像鼠标光标对于鼠标用户一样。就像你永远不会想要隐藏鼠标光标一样，你永远不会想要隐藏焦点指示器。

事实上，一个可见的焦点指示器是一个网站被认为是可访问的网页内容无障碍指南。删除或隐藏焦点指示器是违规的，因此将不能通过成功准则2.4.7:焦点可见(等级a)，该准则指出，任何可操作的键盘用户界面都有一个操作模式，其中键盘焦点指示器是可见的。

浏览器默认的焦点样式

浏览器免费为原生交互元素提供焦点指示器。我们中的大多数人----如果不是全部的话----在某个时间点在他们的样式表中包含了这个CSS代码片段:

:focus{　　outline:none;}

删除浏览器应用的焦点指示器。

为了满足可访问性要求，你应该避免移除浏览器提供的焦点指示器，除非你用自己的焦点指示器替换它。我建议你这么做。

通过保留浏览器焦点样式，你可以满足显示可见焦点指示器的要求，但这可能还不够，因为焦点指示器需要清晰可见才能被认为是可访问的。而且浏览器焦点指示器可能并不总是如此。

(显示一个许多用户可能看不到的指示器有什么好处?)

为了使焦点指示器清晰可见，它需要与邻近的颜色有一个颜色对比度，这个颜色对比度足够高，以便视力中等偏低的用户能够识别它。

在成功准则1.4.11非文本对比度中，网页内容无障碍指南定义了交互式组件所需的最小颜色对比度及其状态。

UI控件上的焦点指示器属于“非文本”组件类别，因为它们用于标识组件的状态。为了通过这个标准，我们的焦点指示器的颜色对比度必须至少为相邻颜色的3:1。

浏览器提供的默认焦点指示器可能达不到这个标准，这取决于您在页面上使用的颜色。如果页面的颜色与默认焦点指示器的颜色不一致，从而导致难以看到，那么可用性问题就会随之而来。当这种情况发生时，你会希望用更好、更容易理解的方式来替代这些焦点样式。

下面是Chrome、Firefox、MicrosoftEdge和Safari风格在应用到一个按钮时各自的焦点指示器的截图:

Chrome、Edge和Safari都采用了1像素的实心轮廓。Firefox应用一个1像素的虚线轮廓。至于与白色背景的颜色对比，它们都通过了可访问性检查。但是Firefox中的虚线轮廓与其他轮廓相比仍然很难分辨，即使它的颜色与白色背景有足够的对比。这是因为轮廓的对比区域不够大。这是因为它的轮廓非常细小，点状分布。我们很快就会回到这个话题。

在黑色背景下，Firefox的黑色聚焦指示灯消失，Safari的指示灯对比度太低，大多数用户很难辨别。

然而，Chrome和MSEdge有一些有趣的地方，它们在第一个轮廓周围加入了一个看起来像第二个轮廓的轮廓，在大多数较暗的背景上创造了足够的对比度。

所以，尽管你可以使用默认的浏览器焦点样式来满足WCAG2.1的要求，然后收工，但是用更容易访问的样式来替代默认的样式通常是个好主意。事实上，在WCAG2.2中，这样做是必要的，因为需求变得更加具体，正如您将在以下部分中看到的，浏览器焦点指示器通常不能满足新的需求。

注:WCAG2.2目前是一个工作草案。因此，我们将在本文中讨论的概念和需求在未来可能会发生变化。

转载请注明：http://www.abuoumao.com/hykz/3542.html