Focus on the Hover

This is going to be the easiest website accessibility tip that anyone will ever give you:

Add the :focus psuedo-class to everything that has a :hover style in your CSS, so that keyboard users get the same visual goodness that you give people who use a mouse.

Any time I mention this, I’m always surprised at how many designers don’t realize that they can use this in their code. It doesn’t have any browser drawbacks, is incredibly easy to implement, and allows keyboard users the benefit of seeing all your nice hover effects as they tab through the page.

The inspiration to write this came about while I was looking at the Gowalla website. Most of the time, I use a mouse to navigate the links on a page. But sometimes I enjoy using a keyboard to navigate through my links, with a quick jab to the tab key. As I was reading their page, I grew concerned that I had no visual cue as to what link or button was currently and silently waiting for my return key. In other words, I was lost. Tab, tab, tab… where am I? Not a clue. I was quickly forced to switch over to my mouse, just so that I could ensure that the activated link was truly the one that I wanted.

This problem extends far beyond Gowalla though. There are countless amounts of websites that force people to use a mouse just to navigate the links. It’s a shame that it happens, considering the little amount of effort that it takes to resolve.

Forget something?

Back to Gowalla – upon further investigation of their CSS, I quickly discovered that they are using Eric Meyer’s reset.css script. Not surprising actually, considering that his reset has grown in popularity quite a bit since it was first launched.

He states clearly in the code, visible for all to read:

/* remember to define focus styles! */

I’m not exactly sure what the statistics are on the amount of people actually using Eric’s reset now, but I’m willing to bet that it’s a significant amount (probably more than I could even begin to guess). What would be more interesting though, would be to find out how many of those users have actually done the work to follow through with some sort of style after the reset has been applied as instructed. Any guesses? Please, don’t tell me - it’s probably more than I want to hear.

Piggyback Your Current Work

I do believe though, that a very high number of designers go to extreme lengths to style everything that has a :hover effect. From custom navigation to footer links. :hover is everywhere! So why not start with that? If you’ve got it in your CSS, then you’re already more than halfway there to fixing the problem!

Let’s be honest though: This isn’t going to fix any other accessibility issues your site might have. That’s where you should consult with a professional accessibility expert (such as Derek Featherstone, Glenda Sims, John F Croston III, Ann McMeekin, Joe Clark, or many others). My advice is just this: By adding a :focus style to every item that has a :hover, you’ll be off to a fantastic start to letting keyboard users navigate your website.

Here’s what I use for my links (disclaimer: I’m not currently using Eric’s reset, but the same principles apply - and it works):

a:hover, a:focus {
	color: yellow;
	text-shadow: 0 3px 5px rgb(0,0,0);
}

As you can see, I just piggybacked the a:focus immediately after a:hover. The two share the very same declarations. This allows the a tag to appear on a focus event (such as tabbing) as it does for a hover. You could give it it’s own line, but I’m just pointing out that you don’t have to.

You can see the same idea used on my top navigation:

#topnav #tn_art a:hover, #topnav #tn_art a:focus {
	background-position: -607px -120px;
}

With the above code, when I hit the tab key and give each link the focus it needs, it looks exactly the same as if I had just hovered over it with your mouse. Plus, I have the visual cue that tells me where my focus is on the page. Go ahead and try hitting tab a few times here on this page to see what I mean.

Go Forth, Evangelize

Once you are able to resolve your own website(s), I have one last request for you: Spread the word! Tell everyone you know (at least those who are afflicted by the issue) how to fix it. This will go a long way in improving the overall state of accessibility on the internet. From there, start thinking about accessibility more broadly, and consider looking for other things you might be able to improve.