Focus!

There are four link states: normal, hover, visited and focus/active. I think it’s safe to say that designers and developers are only really interested in the normal and hover states. A designed visited link is very rare.

I once made a big mistake by asking a designer about the focus state of the link. He didn’t even know it existed! So I showed him what happens when using the keyboard to navigate through the page. There was an outcry. It seemed like he was dying the death of a designer. He told me to get rid of this blurry, blue border immediately. Oh, his soul was being tortured but I refused to change it. He didn’t even know about it! He never used a keyboard to navigate the page.

Please don’t take away the focus of a link. Different browsers have different ways of show the focus of a link. Often it’s the previously mentioned blurry blue border. But sometimes it can also be a dashed or dotted black border. It depends on the browser and operating system.

The focus state helps people who are using a keyboard to navigate a page. Maybe you’ve done it, too - without noticing it. Many people use the TAB key to jump from one input field to the next within a form. In this case the input that’s in focus has this special border. And that goes for links, too.

Video example