E-mail List Archives
Re: Accessible external links
From: Chaals McCathie Nevile
Date: Nov 29, 2015 7:07PM
- Next message: Chaals McCathie Nevile: "Re: real-world accessible data visualization?"
- Previous message: Chaals McCathie Nevile: "Re: Web Accessibility For Notetakers"
- Next message in Thread: None
- Previous message in Thread: Bossley, Pete: "Re: Accessible external links"
- View all messages in this Thread
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 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 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
> > > at http://webaim.org/discussion/archives
> > > > at http://webaim.org/discussion/archives
> > > > > --
Charles McCathie Nevile - web standards - CTO Office, Yandex
<EMAIL REMOVED> - - - Find more at http://yandex.com
- Next message: Chaals McCathie Nevile: "Re: real-world accessible data visualization?"
- Previous message: Chaals McCathie Nevile: "Re: Web Accessibility For Notetakers"
- Next message in Thread: None
- Previous message in Thread: Bossley, Pete: "Re: Accessible external links"
- View all messages in this Thread