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

This page demonstrates good things 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). You will see that that when you focus on a link the colour of the link is inverted, making it really easy to spot. This is in stark contrast to a lot of sites, some of which do some very bad things with the keyboard focus.

This page has style rules for both mouse users and keyboard users. This is what they are:

a {color: #b30000}
a:hover {color: #ff0000; text-decoration:none}
a:focus, a:active {color: #fff; background-color: #333}

Yep, three lines of code, that's all! We invert the colour of links on :focus and :active to improve visibility for keyboard only visitors. :active is required for Internet Explorer 6 and below, which ignore :focus. The :hover statement provides styles for mouse users.

Leave us a comment on the Refined Practice blog if you've got any questions!