前言
随着移动设备的普及，越来越多用户使用触摸屏代替传统的键盘和鼠标进行网站的浏览和交互。同时，无障碍网站的需求也逐渐受到人们的关注，其中键盘可访问性也成为很重要的一个方面。
对于视觉正常用户，他们可以通过鼠标或者触摸屏进行网站的点击和选择；对于使用键盘的用户，如视力障碍者，他们需要通过 tab 键来切换焦点并进行操作。为了提高键盘用户的体验，我们需要在网站中提供辅助信息，让用户能准确地知道自己当前的焦点所在，并且焦点外观应该明显区分于其他元素。
近年来，可访问性的话题广受关注，前端开发者也在不断实现和优化无障碍网站，因此许多辅助工具和技术应运而生。本文将介绍一款工具类的 npm 包 @notainc/key-focus-visible，该工具可以用来实现焦点可见性，即 focus-visible。该包的使用方法和原理都十分简单明了，但对于提升网站可访问性和用户体验却有很大的帮助。
安装和使用
安装
npm install @notainc/key-focus-visible
安装完成后，我们只需要引入该包即可：
import "notainc/key-focus-visible";
使用
默认情况下，当我们使用 tab 键切换焦点时，网页中的焦点并没有明显的可见状态。这时候我们可以使用 @notainc/key-focus-visible 包来让焦点显示出来。在引入该包后，我们只需要在 css 中添加以下代码即可：
button:focus:not([data-focus-visible-added]),
input:focus:not([data-focus-visible-added]) {
outline: none;
box-shadow: 0 0 0 2px blue;
}在上面的代码中，我们使用了 :focus 伪类来获取到当前焦点所在的元素，并为其添加一个蓝色的边框。这时候我们再次使用 tab 键切换焦点，就可以看到焦点已经明显区分于其他元素。
原理讲解
在默认情况下，通过键盘切换焦点时不会触发 :focus-visible 伪类。即使一些浏览器在用户使用鼠标或触摸屏时可以触发 :focus-visible，但是在其使用键盘时仍然不会触发该伪类。为了实现键盘焦点的可见性，我们需要使用 JavaScript 代码来进行处理。
@notainc/key-focus-visible 就是通过 JavaScript 来实现键盘焦点可见性的。该包在用户通过键盘切换焦点时，会动态地添加一个名为 data-focus-visible-added 的属性，在 CSS 中我们可以通过该属性来判断焦点的来源并为其添加相应的样式。这样一来即使用户通过键盘切换焦点，我们也可以实现焦点的可见性。
总结
通过上面的介绍，我们可以了解到 @notainc/key-focus-visible 具有以下功能和特点：
- 使用简单，只需引入该包即可。
- 可以实现键盘焦点在各种浏览器中的可见性。
- 可以在 css 中动态判断焦点的来源来为其添加相应的样式。
- 是一个优秀的无障碍网站技术实现。
提高网站的可访问性和用户体验是前端开发中非常重要的一部分工作，同时也可以有效提高网站的 SEO 优化。 @notainc/key-focus-visible 提供了一个非常简单和有效的实现方案，让我们可以轻松地为键盘用户提供更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672693660cf7123b3671d