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: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.

Safari Preferences Advanced

Short URL:







Leave a Reply

Your email address will not be published. Required fields are marked *