E-mail List Archives
Thread: best method for linking to external sites
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@dars.state.tx.us
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
-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Angela French
Sent: Wednesday, April 13, 2011 3:08 PM
To: 'WebAim Forum ( = EMAIL ADDRESS REMOVED = )'
Subject: [WebAIM] best method for linking to external sites
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: 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.
-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of = EMAIL ADDRESS REMOVED =
Sent: Wednesday, April 13, 2011 1:28 PM
To: = EMAIL ADDRESS REMOVED =
Subject: Re: [WebAIM] best method for linking to external sites
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
-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Angela French
Sent: Wednesday, April 13, 2011 3:08 PM
To: 'WebAim Forum ( = EMAIL ADDRESS REMOVED = )'
Subject: [WebAIM] best method for linking to external sites
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: 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
-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS 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 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: 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
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS 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 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: 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.
-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of William Lawrence
Sent: Friday, April 15, 2011 12:23 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] best method for linking to external sites
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
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED =
> [mailto: = EMAIL ADDRESS 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 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
>