A lightweight library that applies a class to an element only when it is focused by tabbing.

Try the demo

Perfect for showing users who use keyboard navigation what element they've focused, while not altering the experience for other users.

      ...
    <script src="/keyboardFocus.js"></script>
  </body>
</html>

Create a css rule-set with the .keyboardFocus selector and whatever styles you want to be applied to an element when it is focused by tabbing.

.keyboardFocus {
  outline: 1px solid black;
}