Russ Weakley
11-Dec-05
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:
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.
Examples
Without CSS applied
Lorem ipsum dolor sit sed diam nonummy (external link)
nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
With CSS applied
Lorem ipsum dolor sit sed diam nonummy (external link)
nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
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.
