聚焦环动画位置 | CSS-Tricks

Maurice Mahan 创建了 FocusOverlay，一个“用于在聚焦元素上创建叠加层的库”。这个描述有点令人困惑，因为您不需要库来创建聚焦样式。该库实际上做的是在聚焦从一个元素移动到另一个元素时，_动画_聚焦环。它基于与 Flying Focus 相同的想法。

我的无障碍知识还不够强大，无法对此是否是个好主意给出明确的答案，但我的想法是这样的

这是一个很酷的效果。
我可以想象它会成为一个无障碍优势，因为虽然页面会滚动以确保下一个聚焦元素可见，但它不会以其他方式帮助您看到焦点去了哪里。将注意力引导到下一个聚焦元素的移动可能有助于使其更清晰。
我可以想象它会损害无障碍性，因为它是一种通常不存在的_运动_，可能会令人惊讶，甚至令人反感。
如果它在我的所有可聚焦元素上“正常工作”，那就很酷了，但我看到有用于控制行为的数据属性。如果我发现自己需要在我的模板中散布行为控制来适应这个特定库，我可能就不太喜欢它了。

关于最后一点，您可以根据用户的运动偏好有条件地加载它。

该库在 npm 上，但由于 UNPKG，也可以作为直接链接使用。让我们看看如何使用指向资源的 URL 来说明有条件加载的概念

<link 
  rel="stylesheet" 
  href="//unpkg.com/focus-overlay@latest/dist/focusoverlay.css" 
  media="prefers-reduced-motion: no-preference"
/>

<script>
const mq = window.matchMedia("(prefers-reduced-motion: no-preference)");

if (mq.matches) {
  let script = document.createElement("script");
  script.src = "//unpkg.com/focus-overlay@latest/dist/focusoverlay.js";
  document.head.appendChild(script);
}
</script>

JavaScript 也分别为 11.5 KB / 4.2 KB（压缩后）和 CSS 为 453 B / 290 B（压缩后），因此您始终需要将此考虑在内，因为性能和无障碍性是相关的概念。

性能不仅仅是脚本大小。查看代码后，看起来聚焦环是通过将一个 <div> 附加到 <body> 来创建的，该 <div> 具有非常高的 z-index 值以使其可见，并且 pointer-events: none 以防止干扰。然后，它被绝对定位，具有 top 和 left 值，并使用 width 和 height 进行调整大小。看起来新的位置信息是计算出来的，然后应用于这个 div，而 CSS 处理移动。我最后了解到，这些并不是动画效果特别好的 CSS 属性，所以我认为这里的一个未来功能将是使用动画 FLIP 来利用仅动画转换。

Ben

# 2019 年 10 月 28 日

这绝对是我们 10 年前会作为 jQuery 插件添加的东西！
并且在那些日子里，它将成为一个无障碍插件。
如今，它看起来非常侵入性，当我看到 UI 设计师对链接或按钮的简单“聚焦”状态有多么犹豫时，我担心如果他们被呈现这个，他们会变成危险的生物 ;-)
它仍然是一个有趣的无障碍功能，它可能会成为一个标准（安装在需要它的人的工具中）。

Guy Hickling

# 2019 年 11 月 5 日

嗯。我们当然需要鼓励高可见度聚焦指示器以实现无障碍性 - 帮助视力不好的人。但这需要与容易出现运动问题和前庭问题的人进行测试，看看他们的感受，然后再让它走得更远。它也似乎有点分散注意力（对我来说确实如此）。我能看到很多人会觉得它很酷，当他们第一次看到它时。直到他们意识到他们将不得不看着它发生，只要他们留在该网站上。我认为到那时，网站可能会不必要地流失一些访问者。

评论