Simple, accessible external links

Date: 11 December 2005
Author: Russ Weakley

The scenario

The Web Content Accessibility Guidelines 1.0 state:

“Clearly identify the target of each link. [Priority 2] Link text (The rendered text content of a link) should be meaningful enough to make sense when read out of context — either on its own or as part of a sequence of links. Link text should also be terse.”

Web Content Accessibility Guidelines 1.0

Depending on how this checkpoint is read, this could mean that every external link should be identified within the link text itself. For example, you could use ” (off-site link)” or “(external link)” within any link text that points to any external resource.

The problem

Is there a way to add descriptive text to all external links and then replace this text with a small icon for CSS supporting browsers?

The solution

1. Give the external link a class.

<a class="external" href="#">sed diam nonummy</a>

2. Although a title attribute could be used here, a recent study on titles by Steve Faulkner has shown that the title attribute is not displayed in a device independent way in any browser. Instead, add descriptive text within the external link to help identify the target.

<a class="external" href="#">sed diam nonummy (external link)</a>

3. Wrap the descriptive text inside a <span> element.

<a class="external" href="#">sed diam nonummy<span> (external link)</span></a>

4. Create a CSS rule to “hide” the descriptive text. While using “display: none” seems the best solution, this method is not currently supported by many screen readers. For this reason, using absolute positioning to push the text off the screen is one preferred option.

a.external span
{
	position: absolute;
	left: -5000px;
	width: 4000px;
}

5. If you’d like the icon to appear different for each link state, create three variations of the same icon in the one file – leaving a lot of space between each version. For example:

sample icons

6. Create a CSS rule to add a background image icon to the external link

a.external:link
{
	background: url(icon.gif) no-repeat 100% 0;
	padding: 0 20px 0 0;
} 

7. Create a CSS rule to add a background image icon to the visited state of the external link

a.external:visited
	{
	color: purple;
	background: url(icon.gif) no-repeat 100% -100px;
	padding: 0 20px 0 0;
	}

8. Create a CSS rule to add a background image icon to the hover state of the external link

a.external:hover
	{
	color: red;
	background: url(icon.gif) no-repeat 100% -200px;
	padding: 0 20px 0 0;
}

9. Theoretically, the “external link” icon should be explained somewhere on the site.

Example without CSS applied

Example with CSS applied

Note:

In some versions of Windows Internet Exporer, where links wrap over two lines, the background image will be displayed at the end of the first line rather than at the end of the link element.

What do you think?

Let us know what you think – especially if you feel there are problems or better ways to achieve the same result.

Translation

Comments so far

  1. George says:

    Very good!!!

  2. Keri says:

    Thank you for this article. This is unique way of writing external links that is accessible (which more designers should consider) and looks good even without the CSS styling. Thanks a lot! I’ll use this technique from now on. =)