Using a:focus in CSS – quick tip

Posted December 22nd, 2008 by David Hamill

In web design, we often automatically think of blind users when we talk about web accessibility. But a lot of disabled users are not blind. Some people will use a keyboard to navigate your site despite being able to see the screen. Unfortunately browsers aren’t that great at highlighting the link that is in focus.

Helping keyboard only users

You can help your keyboard only users by applying a clear visual property for a:focus within your stylesheet. When your users tab through the links on your website, they will then be able to see which ones are in focus.

Tab through the links on this page with your keyboard to see what I mean. Here’s the CSS I use:

a:focus{ color:#fff; background: #C40064; }

Form fields

You can also use this effect on your form fields. Just don’t expect it to work in Internet Explorer. The Focus pseudo class only works on the <a> tag in Internet Explorer.

What are quick tips?

My quick tips are bits of advice I’ve given lots of times, but they’re not really worth writing a big article about.

Tags: navigation, quick tips