Beast-Blog.com
Let’s Focus on Focus

I surf around the web and check out all sorts of cool sites on any given day. And gladly I report I do see a greater number of accessible, usable sites that look great — a beneficial trend. I visit some really fine websites that qualify for an A or two. Being so, you might understand when I say that it strikes me as a bit of an oddity when I see no link focus. What’s up with that? I ask myself. It’s so simple to do.

Focus is a link state — though Internet Explorer uses “Active” — which is defined in your cascading style sheet or CSS. The style is deployed by the site user when he or she activates a link with their keyboard or mouse.

To a mouse user focus-state styling doesn’t enhance the experience a great deal. It basically says, yeah, you clicked me, and when you release your finger we’re outa here. To the keyboard user, however, the focus-state styling becomes ever more useful and important. It helps the keyboard user keep his or her place on a page while tabbing from link to link (anchor to anchor).

By default, most browsers self-style this link state. But it’s nothing more than a dotted border. I do tend to bounce around a page with a keyboard sometimes and I personally feel the dotted border is difficult to see, especially when the link is located within text content or around an image (though image padding helps by offsetting the border). When I use my keyboard to tab around a page a good focus state is quite helpful. I think all developers should add a focus state to the anchor element in their CSS. It’s quite simple to make it happen so, as I wrote, it strikes me as a it bit of an oddity when I don’t see it in use. If you aren’t familiar with it, the following should help a lot.

The Hocus-Pocus Behind Focus

I’m going to assume you know all the ins and outs of how to define the static and hover link states in your CSS, but if not, here’s a simple example.

/*
  First the static link state.
  In this CSS example, links will be green, bold and underlined by default
*/

a {
  color : green;
  font-weight : bold;
}

The static-state link will look like this!

/*
  Now the hover state.
  The text color will be maroon and not underlined, and it will still be bold
*/

a:hover {
  color : maroon;
  text-decoration : none;
}

The hover-state link will look like this!

Okay, now that that’s done, to apply focus can be as simple as adding it to the hover state entry, like so:

a:hover, a:focus, a:active {
  color : maroon;
  text-decoration : none;
}

The focus-state link will look like this! Note: If using IE, please note that this should be dotted border but IE doesn’t support that unless IE version 7 or greater

That’s it. Simple. Doing it like this is something every developer should do. It’s useful to some people and it’s pretty painless. Doing it this way is the minimum requirement if you like. But you can step it up a little bit and make a big difference by doing something so simple as adding a background color, like this:

a:hover, a:focus, a:active {
  color : maroon;
  text-decoration : none;
}

/* Separate entry for just focus so we get no hover-state background */

a:focus, a:active {
  background-color : yellow;
}

The focus-state with background link will look like this! Note: If using IE, please note that this should be dotted border but IE doesn’t support that unless IE version 7 or greater

Doing this not only changes the link color and underline on hover and focus, but on focus alone it also adds a yellow background to make the tab-to target even easier to find. Do, note though that the background color treatment will likely be unwanted on some links, those with other style attributes. If that’s the case, simply redefine the particular style characteristic under that CSS entry if you discover conflict.

You may choose to redefine certain image links as well, but not all. In fact by adding a little padding to the bottom of the image (in addition to any margin you may have for breathing room), a couple of pixels at least, you’ll create a visible image background color gap which if done well can be a useful addition. To allow this to happen to image links, requires nothing. The focus styling will inherit from the initial anchor definition.

Try to remember this simple but important step to better accessibility and usability when styling your next site.

Filed under Access Counts, Do It CSS Style —

Bookmarking Links » del.icio.us | Digg | blogmarks | StumbleUpon | Technorati |

These posts may be related:

Imagine a Dream »

Keyboard Support: Mysteries Unveiled »

A CSS Starter File »