随着互联网的不断发展,越来越多的人开始依赖数字化辅助设备来访问网站内容。对于许多设计人员来说,为视力障碍人群、手部缺损或其他残疾人作出设计选择是至关重要的,这一点在前端开发领域中非常重要。CSS 悬停获得焦点可以帮助无障碍用户更高效地访问网站上的内容,因此,本文将介绍 CSS 悬停获得焦点这一无障碍设计的最佳实践。
悬停与焦点
在理解 CSS 悬停和焦点之前,我们需要先搞清楚这两个术语的定义。悬停是指当鼠标指针移动到对象上时对象的状态发生改变的效果。而焦点是指用户正在使用的活动表单元素,其中包括文本框、按钮、链接等等。
CSS 悬停获得焦点的重要性
对于一些没有完美的视力、使用助听器、阅读器等辅助工具的用户,悬停可能是他们唯一用来确定他们将选择的元素的方法。在这种情况下,悬停可以弥补视觉信息的缺失,帮助用户更轻松地找到他们需要的元素。此外,提供有关所选元素的细节和状态可以优化用户体验,从而增加对站点的参与度和互动性。
如何优化 CSS 悬停获得焦点
接下来,我们将介绍几个有用的 CSS 技巧来帮助你优化 CSS 悬停获得焦点。
为焦点对象添加背景色
通常来说,当鼠标指针悬停在一个元素上时,浏览器会为该元素添加一个背景颜色或者将其边框变成高亮颜色。同样的,当一个元素被选中时,你也可以为其添加一个背景颜色。这种方法可以通过以下代码块实现:
-------- ------------- ----------- - ----------------- ----- ------ ----- -------- ----- -
在上面的代码块中,我们在 a 标签、按钮和输入框等元素上应用了 CSS,它们的 hover 和 focus 状态都有不同的应用方式。当用户使用键盘在页面元素之间导航时,焦点元素通常会高亮显示,并且它的背景颜色或者边框会变成高亮颜色。
注意,在这个例子中,我们使用 outline 属性来控制焦点元素的描边。这是因为在某些浏览器上,悬停状态下的描边可能会创建不必要的样式,在这种情况下,你可以使用以下代码块来关闭描边样式:
------- - -------- ----- -
显示有关焦点对象的其他信息
在页面上添加关于焦点元素的其他信息可以为用户提供更多帮助。这种信息可以通过多种方式呈现出来,例如使用伪元素 ::after 来添加文字标签,如下所示:
------------------- - -------- - --------- ------ ----- ---------- ------- ------------ ----- -
在上面的代码块中,我们在一个含有按钮的网站页面中使用了 ::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