Focus on making your links clear

by Chris,Tue 30th Oct, 2007, in categories: Accessibility

Here’s another little trick to make things easier for keyboard-only users. Use a:focus when styling your links. This is how we’ve done it:

a:focus,
ul li a:focus{
background-color:#333;
color:#fff;
text-decoration: none;}

Trying tabbing through this page and see how well the links show up. Try tabbing through links on a lot of other blogs and soon you won’t have any idea where you are on the page and what link might be coming up next.

Note: I’m not sure if Internet Explorer 7 is much different from previous versions, but a:focus never worked before. So if IE is still the same as it used to be, just substitute a:active for the same effect.