WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: best method for linking to external sites

for

From: Angela French
Date: Apr 13, 2011 3:21PM

http://www.usability.gov/pdfs/chapter10.pdf 10:12. I'm with you about not really finding them useful. I am sighted and can look in the browser status to see where a link is going. I love that content property. Too bad it's not supported. A similar approach could be done with a <span> tag though it would require the content creator to write "external link" after every link label and wrap a <span> tag around it. Not sure if that will be possible with the way our CMS is set up.

Angela

-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Jared Smith
Sent: Wednesday, April 13, 2011 2:14 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] best method for linking to external sites

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