You’re reading an article by Jay Robinson, a designer living in California.

Defining Focus Styles for Web Accessibility

Most CSS hack­ers are famil­iar with Eric Meyer’s CSS Reset. Most are also famil­iar with Zeldman’s “LoVe? HA!” mnemonic to remem­ber the pseudo-classes for anchors, :link, :vis­ited, :hover, and :active.

But what you might not be famil­iar with is the com­ment at the bot­tom of Meyer’s Reset block: “Remem­ber to define focus styles!” Of course, you never remem­ber. But you should, and you should do it like this:

a:hover,
a:focus,
a:active {
  ...
{

Now you’ll also need to change the mnemonic to “LoVe? H-Fa!” as if burp­ing while laugh­ing. And when screen read­ers tar­get your anchors they light up as if the mouse was hov­ered. For a great exam­ple, imple­ment this set­ting in Safari Pref­er­ences > Advanced > “Press tab to high­light each item on a web­page.”; then take a look at Roger Johansson’s web­site and use Tab to reach every cor­ner of his website.

Web Acces­si­bil­ity, yo. Because it makes you seem like a frickin’ ninja.

Safari Preferences Advanced

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