WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: best method for linking to external sites

for

From: William Lawrence
Date: Apr 15, 2011 1:30PM


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 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
>
> -----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
>