WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: best method for linking to external sites

for

Number of posts in this thread: 7 (In chronological order)

From: Angela French
Date: Wed, Apr 13 2011 2:12PM
Subject: best method for linking to external sites
No previous message | Next message →

Usability guidelines recommend indicating to users whether a link goes to an external site. I am wondering how screen reader users prefer that indication. For sighted users, I am considering a class applied in the anchor tag that applies an icon after the link. Since I cannot associate an alt value on a background image, and users configure to be read title tags are not (at least that's my understanding), 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?

Thank you,

Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
= EMAIL ADDRESS REMOVED =
http://www.checkoutacollege.com<;http://www.checkoutacollege.com/>;

From: Michael.Moore
Date: Wed, Apr 13 2011 2:30PM
Subject: Re: best method for linking to external sites
← Previous message | Next message →

Angela,

Is there a reason that the icon needs to be a background image? It would appear to me that an image used to convey information should live in the informational layer of the page. This makes the solution simple, include the image in the link and add alternative text.

Mike Moore


From: Angela French
Date: Wed, Apr 13 2011 2:42PM
Subject: Re: best method for linking to external sites
← Previous message | Next message →

Our content creators use Contribute. It may prove easier to them to associate a style with a link that to insert an image. This is unclear at the moment. Just kinda covering all my bases, so to speak.

From: Angela French
Date: Wed, Apr 13 2011 3:21PM
Subject: Re: best method for linking to external sites
← Previous message | Next message →

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

From: Jared Smith
Date: Wed, Apr 13 2011 3:27PM
Subject: Re: best method for linking to external sites
← Previous message | Next message →

On Wed, Apr 13, 2011 at 2:08 PM, Angela French < = EMAIL ADDRESS 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

From: William Lawrence
Date: Fri, Apr 15 2011 1:30PM
Subject: Re: best method for linking to external sites
← Previous message | Next message →

That site, usability.gov, was a helpful resource when it began in
2001. It became relevant again when they updated the design in mid
2006.

Other than that, I argue that it’s not as helpful as it is harmful to
folks looking for how to build web products that can be usable by as
wide an audience as possible.

Cheers!
William

On Wed, Apr 13, 2011 at 5:18 PM, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
> 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
>
>

From: Angela French
Date: Fri, Apr 15 2011 1:36PM
Subject: Re: best method for linking to external sites
← Previous message | No next message

Until the time something else "definitive" comes along, it's pretty much the standard for government agencies to follow. I agree that some of it seems out dated.