WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible external links

for

From: Bossley, Pete
Date: Nov 25, 2015 11:13AM

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 REMOVED> ocio.osu.edu


-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Marc Solomon
Sent: Tuesday, November 24, 2015 4:00 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Accessible external links

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

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Ócsvári Áron
Sent: Tuesday, November 24, 2015 3:41 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [WebAIM] Accessible external links

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