Visibility of the Keyboard Focus: Good and Bad

Posted on June 9, 2009 by Paul Ratcliffe

There are a lot of changes between Web Content Accessibility Guidelines (WCAG) v1 and WCAG v2. One of the most important additions is guidance on making sites easier to navigate for keyboard-only users who have good vision.

Most sighted keyboard only users are using either Internet Explorer or Firefox, both of which use the TAB key to move through the active parts of the page (links and form controls) one by one. Hitting the Enter key when a link is focused activates the link – simple! However, one of the main bits of feedback we get from keyboard-only users when testing websites is that the keyboard focus is difficult to see. If they cannot see the keyboard focus they have to use a pointing device instead (difficult or impossible for some users) or give up on the site altogether.

If the website designer does not make any effort in their code to make the keyboard focus visible, all the keyboard-only user has to rely on in Firefox and Internet Explorer is a thin, dotted rectangle showing where the keyboard focus is. This is tricky to see even on a white background and can be impossible to spot on other coloured backgrounds.

WCAG v2 Success Criterion 2.4.7 (Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)) recognises this problem and will hopefully mean that developers start to take more notice of this issue. Currently it is the case that although most sites manage to provide link styling for mouse users using the :hover pseudo-class, many make no provision for keyboard-only users (using the :focus and :active pseudo-classes). Worse, some sites deliberately suppress the default dotted rectangle, making the site impossible to use for a sighted keyboard-only user.

Check out our code example for good keyboard visibility, and we’ve also put together an example of really bad keyboard visibility to show you what not to do.

Any comments, leave ’em below – we’re particularly interested in building up a list of good and bad example sites if you have any suggestions.

Another example of a site hiding the visibility of the keyboard focus has been brought to our attention – moreactive4life has gone down the road of deliberately suppressing the focus rectangle, making it pretty much impossible for a sighted keyboard only user to use the site. The offending code is line 9 of their CSS file.