WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Accessible external links

for

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