浮动焦点带来的美观无障碍

想象一下，当您在网站上使用 Tab 键时，您的 :focus 样式以动画方式从一个元素移动到另一个元素。就像焦点环在页面上向上飞起并移动到下一个元素。它的精神类似于平滑滚动：当运动伴随着变化时，更容易理解发生了什么¹。与滚动（或焦点更改）成为瞬间跳转不同，运动引导您到新的位置。

Guido Bouman 认为这对于无障碍来说是一个好主意，并且研究了一些选项（例如 Flying Focus），但最终 创建了他们自己的，Floating Focus

在这次探索之后，我们对一个好的焦点状态需要什么有了很好的了解。它需要具有高对比度，但不能损害底层组件的可读性。它必须通过某种形式的过渡来引导用户到下一个焦点目标。并且它只需要显示给那些从焦点轮廓中受益的用户。

我们在 2019 年 Maurice Mahan FocusOverlay 时，之前已经讨论过类似的事情。

以下是我当时写的内容

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

在那篇文章中，我介绍了一个条件加载的想法，如果 prefers-reduced-motion 设置为 reduce，则不加载它。如今，您可能要进行 条件 ES 模块导入。

不要将这些视为建议，即这种基于运动的焦点方法对于无障碍来说 100% 有益。我不觉得我有资格做出这样的判断。不过它很有趣。

直接链接 →