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
1. Visual inconvenience
: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
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.
Most of the time it is very easy to fix these problems by simply applying the same CSS to both the
: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
This post is a Quick Tip. Background info is available in Quick Tips for web developers and web designers.
- Previous post: A selection of VoiceOver keyboard commands
- Next post: Using the lang attribute makes a difference