Menu

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

This video shows two pages. The first one still has the focus acitvated. At any time the user knows what link has the focus. In the second example the user can't navigate through the page with the tab key - because it's absolute not clear where the focus is. The page moves "magically" while navigating with the tab key.