WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: best method for linking to external sites

for

From: Jared Smith
Date: Apr 13, 2011 3:27PM

On Wed, Apr 13, 2011 at 2:08 PM, Angela French < <EMAIL REMOVED> > wrote:
> Usability guidelines recommend indicating to users whether a link goes to an external site.

Which ones? I think it really depends on the nature of the site and
the content in question as to whether it's a good idea to provide this
indication. If most of your links are external, it's easy to make an
argument that providing this indication decreases usability. For most
sites, identifying external links is not necessary or terribly useful.

> I'm wondering the best way to indicate to the screen reader user that a link goes to an external site. Or is it even important? Do they get that from the href value?

If this information is presented to sighted users, it should be
presented to screen reader users. The fact it's an external link would
not be automatically presented to the user based on the URL. As such,
this content will need to be presented to them in content somehow.
Simply adding a class will not allow such additional content to be
read.

Just before reading this thread, I was working on a project and
playing around with the following CSS:

a[href^="http:"] {
background: url(/media/template/externallink.gif) top right no-repeat;
padding-right: 20px;
}

a[href^="http:"]:after {
content:" - External link";
position:absolute;
left:-10000px;
top:auto;
}

This CSS will adds the external link icon to all links that start with
"http:", then adds " - External link" to the content of the link, but
positions it off the left side of the screen so as to be invisible to
sighted users. This works great in all modern browsers, unfortunately,
the only screen reader that seems to support CSS-added content is NVDA
on Firefox. This would be a wicked sweet solution as it wouldn't even
require a class name.

I think the approach I will probably take is to add the external link
icon with CSS (as above), then use JavaScript to inject the " -
External link" text.

Jared