WebAIM - Web Accessibility In Mind

E-mail List Archives

Labeling external links as external links

for

From: Paul Bohman
Date: Nov 9, 2003 1:25AM

The discussion about new windows and external links got me thinking
quite a bit. I've made some changes to the site as a result.

Here's my thinking:

My main reason for wanting external links to open in a new window was to
clearly differentiate our site's core content from supplementary
content. This clear differentiation can increase usability for all
users. Users won't be surprised when the end up on a different site. It
allows users to expect a certain type of result and to get that type of
result. (See WAI Web content accessibility guideline 13.1: "Clearly
identify the target of each link").

However, this kind of differentiation can be accomplished more than one
way (not just by opening a new window, which, as has been discussed, can
be problematic), so I've experimented with a method.

The method that I'm about to explain satisfies two important criteria:

1. It informs the user that the link leads to an external site.
2. It lets the user choose how to follow it (whether to just click on it
or to open it in a new window using the right click or CTRL+click method)

I struggled with how best to inform the user that the link leads to an
external site.

The easiest solution would have been to do something like this for every
external link (as seen on the Web page):

"Here's my link - link to external site"
or
"Here's my link - external link"

However, the addition of an entire phrase after every external link
leads to a cluttered page, and interrupts the flow of reading,
especially if the link is in the middle of a sentence.

For visual users, I decided that an icon would keep the page cleaner,
and would hopefully communicate the same message.

My solution included a combination of CSS, the title attribute, and a
simple icon, partly borrowed from the Q bullets icons at
http://www.matterform.com/index.php?page=/qbullets/.

The icon is perhaps not as self-explanatory as I'd like it to be (it is
an image of an arrow pointing at a world globe, see the bottom of
www.webaim.org for an example), but it's as close as I could come at
least for now.

The entire link has a title attribute that informs the user that the
link goes to an external site (title="link to EXTERNAL SITE"). In this
case, the title attribute was used to benefit visual users, not blind
users. I did this because alt text does not pop up as a tool tip in such
browsers as Netscape 7 and Opera. The title attribute does, so I used
it. Also, since the title attribute was applied to the entire link, the
tooltip pops up when you mouse over any part of the link, not just over
the image.

I had to find a creative way to make JAWS read the alt text for the
image. As it turns out, the default behavior of JAWS is to not read the
alt text of an image if it is included along with text in the same link
(I just found this out as I was testing my solution this weekend). JAWS
reads alt text just fine if the only item in a link is the image, or if
the image is not a link, but for some reason JAWS would not read the alt
text for the image if text was also included in the same link. In other
words, I couldn't count on the alt text of the icon to inform blind
users that the link was going to open in a new window. So I used CSS
instead.

I added some text to the end of the link (" - external link") but hid it
using CSS. I hid it above the page entirely, using absolute positioning.
Visual users don't see it at all, and screen reader users hear it as if
it were a part of the same link (which, in actuality, it is).

A link would look like this:

<a href="http://www.external-link.com" title="link to EXTERNAL SITE">
Here's my link
<span class="exlink-text"> - external link</span>
</a>

The style looks like this:
.exlink-text
{
position:absolute;
top:-60px;
left:50%;
}

What this accomplishes is that it puts the words " - external link" a
full 60 pixels above the top of the page, where no one can see it. But
screen readers read it like this:

"Here's my link - external link".

If you're using Opera (or Netscape 4.x), you can turn off the styles and
see that the text is inline, as explained above, even though it is
invisible to visual users with the styles turned on.

So...

By this time you may be wondering if it's worth the effort. Maybe it is,
and maybe it isn't. I still think that it is valuable to let the user
know what to expect before clicking on a link--let the user know if it
is an internal link or external link. Whether the icon/title/CSS method
is best or not is open to discussion.

--
Paul Ryan Bohman
Technology Coordinator
WebAIM (Web Accessibility in Mind)
www.webaim.org
Center for Persons with Disabilities
www.cpd.usu.edu
Utah State University
www.usu.edu


----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/