Keyboard-Friendly Link Focus

Posted May 1st, 2007 by Mike Cherim

After more than a year of judging web sites, we have a good idea of what developers tend to overlook. There are a few things we see over and over again, but the one oversight we see most often is a lack of link focus. It’s a small thing, really, but to anyone navigating a site by keyboard, a lack of link focus can seriously affect the usability. Correcting this oversight can be addressed in a matter of minutes, and there’s really no excuse for not doing it. It all boils down to thinking about it, then doing it. We can’t make you think about it, but we can tell you how to do it.

What is Link Focus?

Barring a few exceptions — such as the Opera browser (see footnote) — when a keyboard user visits a web page he or she will use their keyboard’s tab key to access the page, hopping from link to link or anchor to anchor as some will say. When doing this, the browser they’re using will typically apply a hard-to-see dotted line around the link that marks their current location on the page. It’ll look something like this:

Example 1, Example Link with Focus: Example
Note: If you’re using Internet Explorer (IE) version 6 or older, you’ll see a dashed line instead of a dotted line applied to the examples shown in this article.

In this example this is probably sufficient. The link is standing on its own and you’re being told where to look. But, what if there are in-text links or links that are spaced far apart. Identifying those can prove challenging. This default method might be insufficient.

Example 2, In-text link with Default Focus: Lorem ipsum dolor sit exempoator amet, consectetuer adipiscing elit. Proin felis lacus, interdum hendrerit, molestie eget, exempoator congue eget, ante. Maecenas vel sem. Sed facilisis lacinia quam. Ut faucibus pede eget ligula exempoator.

In the second example, seeing which link has focus is difficult to many people. Thus it really needs to be identified more effectively.

Applying Hover Styling to Links

In the examples above, the faux links were styled to emulate default browser styling: underlined and blue. Most developers aren’t satisfied with this form of link styling. And for good reason. Aside from the fact they demonstrate poorly implemented focus styling, the links themselves aren’t exactly pretty. Let’s make them look better. Let’s make them green by adding the following in the site’s Cascading Style Sheet (CSS).

Example 3, Basic Link Styling:

 a {
   color : green;
 }

Example 4, A Styled Link: Example

Now let’s provide some styling so people using a mouse will have some hover interaction. Let’s make the link go from green to maroon on hover. We’ll also remove the underline to provide a strong visual cue:

Example 5, Hover Link Styling:


 a {
   color : green;
 }

 a:hover {
   color : maroon;
   text-decoration : none;
 }

Example 6, A Hover Styled Link: Example

So far, so good. This styling is widely supported and it’s effective. But no focus has been applied yet; the keyboard user will only see this:

Example 7, Hover-Styled Link with Focus: Example

Obviously we have more work to do.

Applying Focus Styling to Links

Adding focus is quite simple. Just add these pseudo-elements to the link in your CSS:

Example 8, Adding Basic Focus:


 a {
   color : green;
 }

 a:hover, a:focus, a:active {
   color : maroon;
   text-decoration : none;
 }
 /* Note: a:active is added for IE as a:focus isn’t supported. */

Example 9, Basic Focus-Styled Link: Example

Enhancing Link Focus for Usability

So far we complied with the law of the land, so to speak, and we’ve applied some focus styling by sharing the hover styles with the focus state, but realistically it’s still lacking. We can make it better by expanding the styles a bit. Let’s provide a distinctive background color, like so:

Example 10, Adding Enhanced Focus:


 a {
   color : green;
 }

 a:hover, a:focus, a:active {
   color : maroon;
   text-decoration : none;
 }

 a:focus, a:active {
   background-color : yellow;
 }

Example 11, Enhanced Focus-Styled Link: Example

Success! Now keyboard users should have no problem marking their current position on a page… at least as it concerns text links. But what about other linkable elements? Let’s explore further.

Other Options

Aside from a distinctive background color, other options might include adding overline-underline text decoration to links, adding an outline using the outline property, or to make the text bold on focus. Use care implementing the last option because it will cause the text to shift which may produce results that are less-than-desirable.

Adding Focus to Linked Images

There are two basic ways to extend this helpful styling to linked images.

  1. Adding some padding so text link styling is shown.
  2. Adding an interactive border to linked images.

Using Padding

The text link style above, since it isn’t very specific, will apply to linked images as well. To be useful, however, it has to be seen. The removal of the underline won’t be seen unless images are turned off. And neither will the background color. For positioning and clarity — to create a whitespace gap around the image — we will ordinarily apply some margin to the image. If we add some padding, though, the background color will be shown as well. All we have to do is add this to the style sheet:

Example 12, Adding Padding to Allow Linked Image Focus:

 a img {
   padding : 2px;
 }
 /* Alternatively we can get away with styling one side */
 a img {
   padding-bottom : 2px;
 }

Doing this will produce a two-pixel yellow area around (or beneath) the image when focused on by a keyboard user.

Adding a Border

This styling can also be done with the border property — as we do on this site for linked images. In the example below, we’ll also offer some hover styling.

Example 13, Adding a Border to Allow Linked Image Focus:

 a img {
   border : 2px solid green;
 }

 a img:hover, a img:focus, a img:active {
   border : 2px solid maroon;
 }

Doing this will create a two-pixel green border on all linked images, and on hover and focus states, the border will change from green to maroon.

Adding Focus to Linked JavaScript

Sometimes we will add JavaScript interaction to apply hover tricks to linked images and text. Styling is done the same way: Using your CSS. Unfortunately, unlike plain text and images, JavaScript needs to be instructed to apply focus on these links. Below is an example of a linked image made hover-interactive with JavaScript.

Example 14, JavaScript Hover-Enabled Linked Image:

 <a href="link-target.htm"
  onmouseover="image1.src='/images/img-on.gif';"
  onmouseout="image1.src='/images/img.gif';"
   <img id="image1" src="/images/img.gif" width="XX" height="XX" alt="Link Target" />
 </a>

This example changes the image on hover. To make it work for keyboard users, we must add the appropriate JavaScript commands understood by the browser, like so:

Example 15, JavaScript Focus-Enabled Linked Image:

 <a href="link-target.htm"
  onmouseover="image1.src='/images/img-on.gif';"
  onfocus="image1.src='/images/img-on.gif';"
  onmouseout="image1.src='/images/img.gif';"
  onblur="image1.src='/images/img.gif';">
   <img id="image1" src="/images/img.gif" width="XX" height="XX" alt="Link Target" />
 </a>

In Conclusion

If you’re going to submit a website to us, please make sure you offer focus to support keyboard users. And not just for links, but do it for form inputs as well utilizing the same principles shown above. The hover and focus styling of form elements isn’t supported by all browsers, but most do. We can resort to a little JavaScript trickery to make it work on all browsers, and that may be the subject of a future article, but we’re not asking you to fix broken browsers, so it’s not a big priority to us.


Additional Opera Info
Opera simply uses other keys, A and Q, specifically, to jump from link to link. Opera does use the Tab key, but only for form navigation. Opera also offers excellent spatial navigation. Unlike other browsers, Opera doesn’t support :focus styling. But it does have its own satisfactory way of highlighting links with keyboard focus.

4 Responses to: “Keyboard-Friendly Link Focus”

  1. patrick h. lauke responds:
    Posted: May 1st, 2007 at 5:55 pm

    one thing i don’t see mentioned often: in most modern browsers, you can also do specific hover/focus styling to distinguish unvisited and visited links by combining the pseudo classes. for example (with added hack for old versions of IE)

     a:link { background-color: transparent; color: #033; }
     a:visited { background-color: transparent; color: #606; }
     a:link:focus, a:link:hover, a:link:active { background-color: #d8e0e0; }
     a:visited:focus,a:visited:hover,a:visited:active { background-color: #e8d8e8; }
     /* reset the above for IE, as it confuses the heck out of it */
     * html a:visited:focus, * html a:visited:hover, * html a:visited:active { background-color: #d8e0e0; }
    

    from Just Ask

  2. Craig Francis responds:
    Posted: May 2nd, 2007 at 2:50 am

    I completely agree with this setup, and now use it when the designers let me get away with it - or don’t notice.

    However there is an argument that if the default browser behavior is not strong enough for an individual, they should add their own user style sheet, which can be used on all websites they visit… I suppose this is questioning if all website developers should be providing a feature that perhaps the browsers should be doing.

  3. Closing the gap - User Agent improvements » AlastairC responds:
    Posted: May 17th, 2007 at 5:52 pm

    […] One thing that can be dealt with fairly well by the user agent is highlighting the keyboard focus. It has even been considered as a core part of Firefox. If a site provides these, great, but the user(-agent) can and should override them if that’s what the user wants. Given that people who don’t use the keyboard for navigation will probably never see this, it is probably best for browsers to have highlighting of focus enabled by default, with an option to turn it off. […]

Sorry. Comments are closed.




Note: This is the end of the usable page. The image(s) below are preloaded for performance only.