通过以下方式管理用户焦点：焦点可见

这是有关可访问形式设计的系列中的第二个。 如果您错过了第一部分，请查看“带有伪类的可访问表格”。这篇文章重点介绍了伪级及其在Web开发中的有效使用。 :focus-visible

理解焦点

在潜入

>之前，让我们在CSS中回顾一下

pseudo-class。 :focus-visible在视觉上指示使用元素的用户交互（键盘，鼠标，触控板或辅助技术）。 自然互动元素（例如链接，按钮和表单字段）需要明确的焦点指标来维持用户意识。 :focusfocus避免使用此css！

删除默认的

概述删除了所有用户的关键视觉反馈。 始终保留焦点指标。 如果绝对需要删除，请确保提供与视觉上的替代方案。 如果出现了设计涉及，请协作找到一个可访问的解决方案。

<code>:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}</code>

>

:focus：focus-visible

pseudo-class提供了类似于的焦点指标，但具有改进的用户体验。 它的语法很简单：

对于特定元素：:focus-visible :focus

>

<code>:focus-visible {
  /* ...styles... */
}</code>

>允许在鼠标咔嗒/敲击上不必要的视觉杂乱无章的视觉焦点指示器。 如果未实施，则默认浏览器焦点环（通常认为是不受欢迎的）仍然存在。

>

<code>.your-element:focus-visible {
  /* ...styles... */
}</code>

：focus-visible

focus-visible的历史记录

>在

之前，默认的浏览器样式广泛，通常会导致不吸引人的“聚焦环”。 许多开发人员删除了这枚戒指，无意中为键盘用户创建可访问性问题。 基于用户输入方法（键盘，鼠标等），现代浏览器使用启发式方法（算法来查找良好的选择）来确定焦点戒指何时是有益的。 这意味着浏览器智能地应用或省略了焦点环。 在官方规范之前，

早期实施（例如爱丽丝·布里恩（Alice Boxhall）和布莱恩·卡德尔（Brian Kardell）和莫齐拉（Mozilla）的

）依靠多填充。 罗布·多德森（Rob Dodson）的A11y演员提供了对这一进化的进一步见解。:focus-visible> :focus>

为什么焦点很重要

提供明确的焦点指标至关重要。 用户，尤其是那些残疾人，需要了解其网页中的位置和互动。两个盲兄弟网站（:moz-focusringhttps://www.php.cn/link/a21852bf267634b8db7f0633120e5620

>）是视觉线索如何对导航至关重要的有力示例。

演示和代码

以下代码在动作中演示:focus-visible。 仅在使用键盘导航时才会出现焦点戒指，展示浏览器的智能启发式。

<code>:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}</code>

>浏览器支持和后备

浏览器支持各不相同。 在不支持的浏览器中使用

（功能查询）作为后备样式：> @supports

<code>:focus-visible {
  /* ...styles... */
}</code>

其他可访问性注意事项

确保聚焦指示器颜色符合WCAG 2.2非文本对比度（级别AA）指南。

• >通过保持跨交互式元素的一致样式来避免认知超负荷。>
• >浏览器支持（来自caniuse.com）：

（将在此处使用更新的Caniuse数据重新创建表）

进一步读取：

https://www.php.cn/link/fdac69c3eee7bd0427535354EAE235A4

>

• > https://www.php.cn/link/54bca824f5fa890e036fb9191bcdc324 >

以上是通过以下方式管理用户焦点：焦点可见的详细内容。更多信息请关注PHP中文网其他相关文章！