Don’t lose your :focus

CSS resets are great. Without them, our jobs as UI developers would be much more frustrating, or at the least, more tedious. They give us a (mostly) level playing field when building user interfaces that work across multiple browsers. My personal favorite, and probably the most-used reset stylesheet, is the one Eric Meyer has built and maintained. It works great and has solid reasoning behind it.

What does this have to do with the focus state? Part of the reset includes resetting the focus state style.

/* remember to define focus styles! */
:focus {
	outline: 0;
}

Note the comment there…

Resetting the focus state is fine, I’d encourage it in fact — the default browser focus state is ugly! Here’s an example of what the default focus state for Firefox (3.5 Mac) looks like:

Even though Eric explicitly states in his reset CSS to define a focus style, in my experience this step is often neglected. Without a focus style defined, using the keyboard as a navigation device becomes a more difficult task. Keyboard navigation may be an edge case, but a focus state should always be considered.

The simplest solution is to extend the hover style:

a:hover, a:focus {
	color: #666;
	}

With one extra selector, we’ve made the interface more accessible to keyboard navigation. For more complex interfaces with varying hover styles, you may need to declare more than one focus style, but that’s a small price to pay for accessibility.