Accessibility Tip:
Create Keyboard-friendly Link Effects

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

Many people with disabilities prefer to use the keyboard to tab between links, form fields, and other page elements because they have problems using a mouse. That means they won't see your cool onMouseOver JavaScript effects or the style definitions for :hover. Maybe it's time to add a little focus to your links and create keyboard-friendly link effects.

CSS Link Definitions

Often, we think of the mouse as the ubiquitous navigation method. That mindset makes it easy to forget that the mouse isn't an option for some users and that some other people without physical disabilities just prefer to use the keyboard whenever possible.

Two previous newsletter articles, we've shown you how to use style sheets to create custom menus and add visual interest to basic text links.

Both articles create these effects by manipulating four different link states. Technically, they're called "pseudo-classes."

As discussed in the Create Custom Menus article, it's possible to style text links in such a way that they mimic the JavaScript onMouseOver and onMouseOut events. That creates a much more spider-friendly navigation system and reduces the number of images required on the page.

However, both :hover and JavaScript events require a mouse if visitors are to see the special effects. That's bad news for your visitors who navigate using their keyboards.

Navigating With The Keyboard

You can make keyboard navigation easier using another link state that we haven't discussed yet. It's the :focus state - the keyboard equivalent to the :hover state.

Most modern browsers allow users to tab through links using the Tab key on the keyboard. As you move from link to link, the current link is said to have focus. It's similar to the onFocus JavaScript event discussed in the Create Dynamic Form Fields article from the October 2002 issue.

Try tabbing between these links. If you're using the Opera browser, select F9 before you begin to change focus to the page so you can navigate with the keyboard.

Even though you can navigate between links using your keyboard, it's not always easy to tell which exact link is the current one. The :focus state helps you make those links more prominent and give all visitors a similar browsing experience.

A similar browsing experience is a basic component of accessible page design and a requirement of sites that comply with Section 508 guidelines.

Hovering With The Keyboard

The solution is as simple as adding a single CSS rule that applies to the :focus state. Let's assume you're using a simple background color with the :hover state to make links more prominent inside your page text.

The style definition might look like this:

<style type="text/css">
a:hover {background:yellow; color:navy;}
</style>

Duplicate the hover effect by adding the same style rule to the :focus state:

<style type="text/css">
a:hover {background:yellow; color:navy;}
a:focus {background:yellow; color:navy;}
</style>

Here's the same list of links. Run your mouse over them (if you use a mouse!) and see the hover effect. Then tab through them and notice the same effect as hover when each link has focus:

Note that the example code would change all the links on the page, which might cause problems with your main navigation menu. Depending on your page layout, you may want to create a separate class for the text links and apply different styles to them:

<style type="text/css">
a.example:hover {background:yellow; color:navy;}
a.example:focus {background:yellow; color:navy;}
</style>

Then, refer to the class inside the HREF tag:

<a href="http://www.netmechanic.com/promote.htm" 
   class="example">Search Engine Power Pack</a>

Browser Support

If you didn't see the :focus effect, you're probably using Explorer for Windows, which doesn't support it - yet. That's pretty odd considering that Explorer supported the :hover effect long before Netscape added it to their Version 6 browser.

The other major browsers already support the :focus state.

Since the :focus state is part of the CSS standard, we hope that future versions of Explorer for Windows will support it! If you go ahead and add it to your HTML code now, you're creating pages that will look good now and in the future.

Even if the majority of your visitors use Explorer, :focus is still valuable. It's a simple, low impact accessibility feature that degrades gracefully. Visitors using Explorer for Windows can still tab through your links, they just won't see any fancy formatting. Visitors who use other browsers will appreciate your effort to make their browsing experience more enjoyable.

NetMechanic's online browser compatibility tutorial contains more information about specific compatibility problems, how to find them, and how to fix them!