Fork me on GitHub

Animated focus ring

This page demonstrates a simple drop-in script that builds upon the WICG :focus-ring polyfill by adding support for animating the focus ring as it moves around the page.

To see it in action, press the Tab key to move the keyboard focus on this page.

The behavior is based upon that of the focus ring on the WebAIM website.

This can be useful for keyboard users who might have a difficult time seeing where their focus ring has moved to when they press tab, which can be particularly hard if focusable elements on the page are spaced far apart.

For more details on how to use the script and customize its behavior, see the GitHub repository.

Example focusable inputs