Imagine if your :focus styles animated from element to element as you tab through a site. Like the focus ring up and flew across the page to the next element. The spirit of it is similar to smooth scrolling: it’s easier to understand what is happening when movement accompanies the change¹. Rather than scrolling (or focus change) being an instant jump, movement guides you to the new location.
Guido Bouman thought this would be good for accessibility and looked at some options (e.g. Flying Focus) but ultimately created their own, Floating Focus:
After this exploration we had a good idea of what a good focus state needed. It needs to have a high contrast but not impair readability of the underlying components. It has to guide the user to the next focus target with a form of transition. And it only needs to show for users benefitting from the focus outline.
We’ve covered a similar thing before in 2019 when Maurice Mahan FocusOverlay.
Here’s what I wrote about it back then:
- It’s a neat effect.
- I can imagine it being an accessibility win since, while the page will scroll to make sure the next focused element is visible, it doesn’t otherwise help you see where that focus has gone. Movement that directs attention toward the next focused element may help make it more clear.
- I can imagine it being harmful to accessibility in that it is motion that isn’t usually there and could be surprising and possibly offputting.
- If it “just works” on all my focusable elements, that’s cool, but I see there are data attributes for controlling the behavior. If I find myself needing to sprinkle behavior control all over my templates to accommodate this specific library, I’d probably be less into it.
In that article, I covered a conditional loading idea for not loading this if prefers-reduced-motion was set to reduce. These days, you might do a conditional ES Modules import.
Don’t take any of this as advice that this movement-based focus stuff is 100% good for accessibility. I don’t feel qualified to make that determination. It is interesting though.
- This reminds me of “transitional interfaces” as well. Movement can really help make clear what is happening in a UI.
I think there’s definitely cognitive accessibility benefits for keyboard users, but you’re right to consider if it will be a barrier for people with motion sensitivity, or for anyone else. I wonder too if the effect is more useful on some interfaces or content than others?
Hi Chris,
Thanks for the feature! Article author here. Floating Focus actually removes its “smooth” transition when a user has
prefers-reduced-motionset toreduce. (Recent addition) What remains then is a properly customizable focus ring. When JavaScript is completely disabled, it degrades to the original (albeit subpar) focus ring.focus-behavior: smooth
I want to learn Accessibility in and out… Front and backend both..!!