焦点管理：outline 与 :focus-visible 的无障碍考量
话说，各位前端的弄潮儿们，咱们每天码代码，是不是也经常在键盘上噼里啪啦一顿操作猛如虎，然后鼠标一扔，完全依赖键盘来驰骋江湖？这个时候，一个好的焦点管理，简直就是咱们这些键盘侠的生命线啊！
你想想，如果页面上所有能交互的元素，在你用 Tab 键切换的时候，全都像隐形人一样，毫无反应，那得多崩溃？你只能盲人摸象般地猜测现在焦点在哪里，这酸爽，简直无法想象！更别提那些依赖屏幕阅读器或者其他辅助技术的用户了，他们连“摸象”的机会都没有，直接两眼一抹黑。
所以，今天咱们就来聊聊焦点管理中的两位重量级选手：outline 和 :focus-visible，看看它们如何帮助我们打造更加无障碍的网页，让所有用户都能轻松愉悦地使用我们的产品。
outline：老牌劲旅，简单粗暴却实用
outline 算得上是焦点指示器界的元老了。它简单直接，就像一个耿直的程序员，只需要设置几个属性，就能在元素周围画出一圈醒目的边框，告诉你：“嘿，老铁，焦点在这里！”
button:focus {
outline: 2px solid blue;
}这段代码的意思是，当按钮获得焦点时，就会出现一个 2 像素宽、蓝色的实线边框。简单粗暴，但是有效！
outline 的优点很明显：
- 兼容性好： 几乎所有浏览器都支持
outline，不用担心出现兼容性问题。 - 易于使用： 只需要几行 CSS 代码就能实现，上手简单。
- 默认行为： 浏览器默认会为可聚焦元素添加
outline，即使你不手动设置，也能提供一定的焦点指示。
但是，outline 也有一些缺点，让它在无障碍的道路上显得有些力不从心：
- 不可定制性：
outline的样式比较有限，只能设置颜色、宽度、样式（实线、虚线等），无法实现更复杂的视觉效果。 - 始终显示： 无论用户是用鼠标还是键盘操作，
outline都会显示，这在某些情况下可能会显得冗余。比如，当你用鼠标点击按钮时，outline可能会显得有些碍眼。 - 与元素本身边框冲突：
outline是在元素边框之外绘制的，可能会与其他边框重叠，导致视觉效果不佳。
:focus-visible：智能选手，只在需要时才出现
:focus-visible 可以说是焦点指示器界的后起之秀，它更加智能和灵活。它的出现，是为了解决 outline 的一些痛点，尤其是在鼠标操作时，避免不必要的焦点指示。
:focus-visible 的核心思想是：只有当用户通过键盘或其他非鼠标输入方式与元素交互时，才显示焦点指示器。 也就是说，如果你用鼠标点击按钮，:focus-visible 就不会显示；但是如果你用 Tab 键切换到按钮，:focus-visible 就会显示。
这种行为更加符合用户的期望，避免了不必要的视觉干扰，提升了用户体验。
button:focus-visible {
outline: 2px solid blue;
}这段代码的意思是，当按钮通过键盘或其他非鼠标输入方式获得焦点时，才会出现一个 2 像素宽、蓝色的实线边框。
:focus-visible 的优点：
- 智能显示： 只在需要时才显示焦点指示器，避免了不必要的视觉干扰。
- 可定制性强： 可以像
outline一样设置颜色、宽度、样式，还可以与其他 CSS 属性结合，实现更复杂的视觉效果。 - 提升用户体验： 更加符合用户的期望，提升了用户体验。
当然，:focus-visible 也有一些需要注意的地方：
- 兼容性： 虽然
:focus-visible的兼容性已经越来越好，但仍然存在一些旧版浏览器不支持的情况。 - 需要polyfill： 如果要支持所有浏览器，可能需要使用 polyfill 来提供
:focus-visible的功能。
如何选择？outline vs. :focus-visible
那么，问题来了，在实际开发中，我们应该选择 outline 还是 :focus-visible 呢？
我的建议是：根据实际情况，灵活选择。
- 如果你的项目对兼容性要求非常高，并且只需要简单的焦点指示器，那么
outline是一个不错的选择。 毕竟它简单粗暴，兼容性好，上手快。 - 如果你的项目对用户体验有更高的要求，并且希望避免不必要的视觉干扰，那么
:focus-visible是一个更好的选择。 它可以根据用户的输入方式，智能地显示焦点指示器。
当然，你也可以将两者结合起来使用，先使用 outline 提供一个基本的焦点指示器，然后使用 :focus-visible 来优化用户体验。
button:focus {
outline: 2px solid blue; /* 提供一个基本的焦点指示器 */
}
button:focus:not(:focus-visible) {
outline: none; /* 鼠标点击时隐藏焦点指示器 */
}
button:focus-visible {
outline: 2px solid blue; /* 键盘操作时显示焦点指示器 */
}这段代码的意思是，当按钮获得焦点时，默认显示一个 2 像素宽、蓝色的实线边框。但是，如果用户用鼠标点击按钮，:focus 伪类会触发，:focus-visible 伪类不会触发，所以 outline: none; 会隐藏焦点指示器。如果用户用 Tab 键切换到按钮，:focus 和 :focus-visible 伪类都会触发，所以 outline: 2px solid blue; 会显示焦点指示器。
超越边框：更高级的焦点管理技巧
除了 outline 和 :focus-visible 之外，还有一些更高级的焦点管理技巧，可以帮助我们打造更加无障碍的网页。
- 使用
tabindex属性：tabindex属性可以控制元素是否可以获得焦点，以及获得焦点的顺序。你可以使用tabindex="0"来让元素可以获得焦点，使用tabindex="-1"来禁止元素获得焦点。 - 使用 JavaScript 管理焦点： 你可以使用 JavaScript 来动态地管理焦点，例如，在模态框打开时，将焦点锁定在模态框内部，防止用户意外地切换到模态框外部。
- 提供清晰的视觉提示： 除了
outline和:focus-visible之外，你还可以使用其他视觉提示来增强焦点指示，例如，改变元素的背景色、字体颜色、大小等。
无障碍的终极目标：让每个人都能畅游网络
焦点管理只是无障碍开发中的一个环节，但它非常重要。一个好的焦点管理，可以帮助所有用户，尤其是那些依赖辅助技术的用户，更加轻松地浏览和使用我们的网页。
无障碍开发的终极目标是：让每个人都能平等地访问和使用网络，无论他们的身体状况如何。 这不仅仅是一种道德责任，也是一种商业价值。一个更加无障碍的网页，可以吸引更多的用户，提升品牌形象，甚至可能带来更多的商业机会。
所以，让我们一起努力，打造更加无障碍的网页，让每个人都能畅游网络，享受科技带来的便利！
举个栗子：打造一个无障碍的导航菜单
假设我们要创建一个导航菜单，菜单项可以通过键盘和鼠标进行选择。我们可以使用 :focus-visible 来提供焦点指示器，并使用 JavaScript 来管理焦点。
<nav>
<ul>
<li><a href="#" tabindex="0">首页</a></li>
<li><a href="#" tabindex="0">产品</a></li>
<li><a href="#" tabindex="0">关于我们</a></li>
<li><a href="#" tabindex="0">联系我们</a></li>
</ul>
</nav>
<style>
nav ul li a {
display: block;
padding: 10px 20px;
text-decoration: none;
color: #333;
}
nav ul li a:focus-visible {
outline: 2px solid blue;
}
</style>
<script>
// 获取所有菜单项
const menuItems = document.querySelectorAll('nav ul li a');
// 添加键盘事件监听器
menuItems.forEach(item => {
item.addEventListener('keydown', (event) => {
// 如果按下的是 Tab 键
if (event.key === 'Tab') {
// 如果按下的是 Shift + Tab 键
if (event.shiftKey) {
// 将焦点移动到上一个菜单项
const previousItem = item.previousElementSibling?.querySelector('a');
if (previousItem) {
previousItem.focus();
event.preventDefault();
}
} else {
// 将焦点移动到下一个菜单项
const nextItem = item.nextElementSibling?.querySelector('a');
if (nextItem) {
nextItem.focus();
event.preventDefault();
}
}
}
});
});
</script>在这个例子中，我们首先为每个菜单项添加了 tabindex="0"，让它们可以获得焦点。然后，我们使用 :focus-visible 为菜单项提供焦点指示器。最后，我们使用 JavaScript 来监听键盘事件，当用户按下 Tab 键时，将焦点移动到上一个或下一个菜单项。
通过这些简单的步骤，我们就创建了一个无障碍的导航菜单，让所有用户都能轻松地浏览和使用我们的网站。
希望这篇文章能够帮助你更好地理解焦点管理，并在实际开发中应用这些技巧，打造更加无障碍的网页。记住，无障碍开发不仅仅是一种技术，更是一种责任，一种对所有用户的尊重和关爱。
让我们一起努力，让网络世界更加美好！