Peter Wilson

Maintaining Link Focus

Written by

Peter Wilson

in

Anyone who has attempted to navigate a web page using the keyboard, will have experienced sites that remove the default a:focus style without adding in a replacement.

The cause – but not the fault – lays with Eric Meyer’s original CSS reset, subsequently included in the YUI CSS framework, among others.

Eric warned that he didn’t “recommend that you just use this in its unaltered state” but people did so anyway. Including the code:

:focus {
  outline: 0;
}

The problem became so widespread that Eric has apologised for it, even though it wasn’t his fault people ignored his advice! In the second version of his reset, he removed the code above.

At Soupgiant, we take a two-fold approach to link focus styles. We leave the outline in place because users have come to expect it. To increase the contrast of focused links further, we reverse the foreground and background colours too.

a:link, a:visited {
  color: #00f;
  background: transparent;
  text-decoration: underline;
}
a:focus {
  color: #fff;
  background: #00f;
  text-decoration: none;
}
a:hover, a:active {
  color: #00f;
  background: transparent;
  text-decoration: none;
}

While it seems we are doubling up on some code, it’s a necessary evil as multiple pseudo-classes can be applied to single a link at once (for example: :hover and :focus).

For the cost of a few extra bytes, we believe it adds significantly to the usability of our sites. For that reason, we’ve included it in Minimum Page: our reset-free, CSS starting point.

More posts