随着互联网的不断发展，越来越多的人开始依赖数字化辅助设备来访问网站内容。对于许多设计人员来说，为视力障碍人群、手部缺损或其他残疾人作出设计选择是至关重要的，这一点在前端开发领域中非常重要。CSS 悬停获得焦点可以帮助无障碍用户更高效地访问网站上的内容，因此，本文将介绍 CSS 悬停获得焦点这一无障碍设计的最佳实践。
悬停与焦点
在理解 CSS 悬停和焦点之前，我们需要先搞清楚这两个术语的定义。悬停是指当鼠标指针移动到对象上时对象的状态发生改变的效果。而焦点是指用户正在使用的活动表单元素，其中包括文本框、按钮、链接等等。
CSS 悬停获得焦点的重要性
对于一些没有完美的视力、使用助听器、阅读器等辅助工具的用户，悬停可能是他们唯一用来确定他们将选择的元素的方法。在这种情况下，悬停可以弥补视觉信息的缺失，帮助用户更轻松地找到他们需要的元素。此外，提供有关所选元素的细节和状态可以优化用户体验，从而增加对站点的参与度和互动性。
如何优化 CSS 悬停获得焦点
接下来，我们将介绍几个有用的 CSS 技巧来帮助你优化 CSS 悬停获得焦点。
为焦点对象添加背景色
通常来说，当鼠标指针悬停在一个元素上时，浏览器会为该元素添加一个背景颜色或者将其边框变成高亮颜色。同样的，当一个元素被选中时，你也可以为其添加一个背景颜色。这种方法可以通过以下代码块实现：
a:focus,
button:focus,
input:focus {
background-color: #333;
color: #fff;
outline: none;
}在上面的代码块中，我们在 a 标签、按钮和输入框等元素上应用了 CSS，它们的 hover 和 focus 状态都有不同的应用方式。当用户使用键盘在页面元素之间导航时，焦点元素通常会高亮显示，并且它的背景颜色或者边框会变成高亮颜色。
注意，在这个例子中，我们使用 outline 属性来控制焦点元素的描边。这是因为在某些浏览器上，悬停状态下的描边可能会创建不必要的样式，在这种情况下，你可以使用以下代码块来关闭描边样式：
*:focus {
outline: none;
}显示有关焦点对象的其他信息
在页面上添加关于焦点元素的其他信息可以为用户提供更多帮助。这种信息可以通过多种方式呈现出来，例如使用伪元素 ::after 来添加文字标签，如下所示：
button:focus::after {
content: " (Focus)";
color: #aaa;
font-size: 0.8rem;
margin-left: 10px;
}在上面的代码块中，我们在一个含有按钮的网站页面中使用了 ::after 伪类，并添加了包含按钮已获得焦点状态的文本标签。
遵循 WCAG 2.1 标准
为了确保你的网站成为支持附加需求的所有用户最佳选择，你需要遵循 WCAG 2.1（Web 内容无障碍指南）。WCAG 2.1 标准详细描述了创建无障碍内容的要求，并为 web 开发人员提供了一套规则和最佳实践。
在使用 CSS 悬停获得焦点时，你应该考虑以下几点：
- 尽可能使用 CSS 样式来描绘视觉状态变化，而不是使用常用的特殊符号或只能通过颜色辨别的特殊指示符号。
- 必须满足对比度要求，以确保页面上所有文本内容和其他元素的可读性和辨识度。
- 在利用 JavaScript 实现交互式 UI 控件时，需要为这些控件提供键盘 / 操作说明，以确保这些功能可以同时适用于使用键盘、鼠标、屏幕阅读器、功能性语音输出等辅助工具的用户。
示例代码
最后，我们提供一个 CSS 悬停获得焦点的示例代码，用来演示如何为元素提供基本信息。
-- -------------------- ---- -------
--------- -----
------
------
-------
------ -
-------------- ----
------- -----
-------- -----
------- -----
-
------------ -
----------------- --------
------ -----
-
------------ -
----------------- --------
------ -----
-------- -----
-
------------------- -
-------- - ---------
------ -----
------------ -----
-
--------
-------
------
------------- -----------
-------
-------在这个例子中，我们通过 ::after 伪类在被焦点状态元素之后添加了一条内容，并使用了较高的对比度保证了内容的可读性。
结论
CSS 悬停获得焦点是提高无障碍体验的一种有效方法。通过添加背景色和其他状态信息，可以帮助使用助听器、阅读器等辅助工具的用户更方便地访问页面上的内容。如果你在设计网站时考虑到了无障碍使用者的需求，那么你就可以通过一些基本的 CSS 技巧，轻松地将网站转化为无障碍版本，以确保所有用户都能访问和使用你的内容。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671b11109babaf620fa76dfa