Whenever you use :hover, also use :focus

Probably one of the most common accessibility oversights is neglecting to apply CSS to the :focus state of links whenever you style the :hover state. How much of a problem this oversight leads to for non-mouse users depends on what CSS is applied to the :hover state.

1. Visual inconvenience

When the :hover state is only lightly styled, for instance by changing the text colour, neglecting to also style the :focus state often does not cause any serious usability problems. As long as the outline property is not removed from links that receive focus, non-mouse users can still get visual feedback on where keyboard focus is.

2. Serious usability problem

More problems occur when the outline is removed from links that have keyboard focus without replacing it with some other visual indication. This problem has become more and more common due to some popular reset stylesheets zeroing the outline property.

The links are still technically accessible, though the only visual indication the user gets is the changing href value that some, but not all, browsers display in their status bar.

3. Completely inaccessible

Then there are techniques that cause major problems because they make content inaccessible to non-mouse users. This can be either because :hover is used on elements that cannot receive keyboard focus, because :hover is used to reveal content and no CSS is applied to the :focus state, or a combination. Many of the “CSS only dropdown menus” out there are classic examples of this.

Focus on :focus (and :active)

Most of the time it is very easy to fix these problems by simply applying the same CSS to both the :hover and :focus states. You may want to include the :active state as well to cater for people who use Internet Explorer 7 and earlier, since IE 8 is the first version to support :focus.

This post is a Quick Tip. Background info is available in Quick Tips for web developers and web designers.

Posted on April 1, 2010 in Quick Tips, CSS, Accessibility