Defining Focus Styles for Web Accessibility

Most CSS hackers are familiar with Eric Meyer’s CSS Reset. Most are also familiar with Zeldman’s “LoVe? HA!” mnemonic to remember the pseudo-classes for anchors, :link, :visited, :hover, and :active.

But what you might not be familiar with is the comment at the bottom of Meyer’s Reset block: “Remember to define focus styles!” Of course, you never remember. But you should, and you should do it like this:

a:hover,
<mark>a:focus,</mark>
a:active {
  ...
{

Now you’ll also need to change the mnemonic to “LoVe? H-Fa!” as if burping while laughing. And when screen readers target your anchors they light up as if the mouse was hovered. For a great example, implement this setting in Safari Preferences > Advanced > “Press tab to highlight each item on a webpage.”; then take a look at Roger Johansson’s website and use Tab to reach every corner of his website.

Web Accessibility, yo. Because it makes you seem like a frickin’ ninja.

Short URL: http://jwr.cc/x/1f