A Bad Thing to Do to Keyboard Focus Visibility – An Example From Refined Practice, Online Brand Consultants

This page demonstrates a really bad thing to do with the visibility of the keyboard focus. Try to navigate the page using the keyboard (just use the TAB key to skip from link to link on most browsers). Not sure where the keyboard focus is? Yep, it's invisible, making the page pretty much impossible to use with the keyboard if you are sighted (you can escape at any time by pressing Alt← to go back, or dig out your mouse and follow this link to the blog post explaining all this).

In common with a lot of websites, we've added styling rules for links for mouse users, but completely ignored people who use the keyboard to get around. Here are our style rules for links:

a {color: #b30000}
a:hover {color: #ff0000; text-decoration:none}

Now, that just makes a page difficult to use, leaving a thin, dotted rectangle around the keyboard focused element but nothing else. Here we've gone the extra mile to make the page impossible with the addition of a single line of CSS:

a {outline:0}

This little gem removes the focus rectangle completely.

Our recommendation regarding the keyboard focus is to make it even more prominent than the focus rectangle does by inverting the colour of the links. Check out our example of good keyboard focus visibility to see this in action.

Leave us a comment on the Refined Practice blog if you know of any other sites that do this, and we'll add them to a Hall of Shame...