Some people, for various reasons, use their keyboard instead of a mouse to navigate web pages. Since keyboards and mice interact differently with your website, your website doesn't necessarily work optimally for keyboard users if you have coded it with mouse users in mind.

A typical scenario is that a keyboard user jumps from link to link (with the tab key but depends on the browser). When that happens, the :focus state becomes active and the link is highlighted in some way by the web browser. This default highlighting, typically an outline, might not be as good as it could be so you should consider to do something about it.

:focus vs. :hover

A fast and simple solution is to apply the same styles on :focus as on :hover. So you do something like this:

a:hover, a:focus { .... }

This works well on things like tabs and some menus where there is a large difference between default and active state, f.ex. when you invert the colors on :hover. In other cases, like a slight color change which is typical for links inside text, this is not that good. The :hover state just needs to confirm to a mouse user that it is a clickable link under the pointer, and the user already knows where the link is because that's where the mouse pointer is. While for a keyboard user, the link can be anywhere on the screen and needs to stand out more to draw the user's attention.

Solutions

So, there are basically two ways to fix this.

1. Add more style to a:focus
2. Make both :hover and :focus more visible

After all, mouse users also benefit from more visible links. Experiment with color, background-color, outline and even shadows (box-shadow, text-shadow) to find a balance between visibility and good design.