E-mail List Archives
Thread: Accessible external links
Number of posts in this thread: 4 (In chronological order)
From: Ócsvári Áron
Date: Tue, Nov 24 2015 1:41PM
Subject: Accessible external links
No previous message | Next message →
Hello,
I noticed that on Webaim website, NVDA announces external links. I'd
like to use the same method on my website, but I didn't find any code
about it in the website source. How does it work? Does anyone who can
show me an example?
Thanks for your help!
regards,
Aron
From: Marc Solomon
Date: Tue, Nov 24 2015 2:00PM
Subject: Re: Accessible external links
← Previous message | Next message →
It looks like some CSS magic was used to add this text off screen. Here is an excerpt of the CSS:
article a[href^="http:"]::after, article a[href^="https:"]::after {
content: " - External link";
left: -10000px;
position: absolute;
top: auto;
}
Marc
From: Bossley, Pete
Date: Wed, Nov 25 2015 11:13AM
Subject: Re: Accessible external links
← Previous message | Next message →
Another option is to use clipping to hide text.
.visually-hidden {
position: absolute !important;
height: 1px; width: 1px;
border: 0; padding: 0;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
<a href="http://blablabla.com/bla" Link Text <span class=visually-hidden>(External Link)</span></a>
Peter Bossley
OCIO Accessibility Analyst
Office of the CIO Enterprise Applications
The Ohio State University
614-292-8571 Office
= EMAIL ADDRESS REMOVED = ocio.osu.edu
From: Chaals McCathie Nevile
Date: Sun, Nov 29 2015 7:07PM
Subject: Re: Accessible external links
← Previous message | No next message
Or just to have something visual indicating that the link is external.
This is one of the things that wikis often get right...
cheers
On Thu, 26 Nov 2015 04:13:16 +1000, Bossley, Pete < = EMAIL ADDRESS REMOVED = >
wrote:
> Another option is to use clipping to hide text.
>
>
> .visually-hidden {
> position: absolute !important;
> height: 1px; width: 1px;
> border: 0; padding: 0;
> overflow: hidden;
> clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
> clip: rect(1px, 1px, 1px, 1px);
> }
>
> <a href="http://blablabla.com/bla" Link Text <span
> class=visually-hidden>(External Link)</span></a>
>
>
>
>
> Peter Bossley
> OCIO Accessibility Analyst
> Office of the CIO Enterprise Applications
> The Ohio State University
>
> 614-292-8571 Office
> = EMAIL ADDRESS REMOVED = ocio.osu.edu
>
>
>