WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Opens In New Window

for

From: Joe Chidzik
Date: Jul 12, 2018 9:21AM

I like using icons for new window links. Wikipedia does something similar (they icons to highlight links that lead externally vs elsewhere within Wikipedia I believe).

One consideration is choosing an icon that is visually intuitive; screenreader users have the behaviour explained to them. Sighted users must interpret the icon, although most of the ones I've seen used are fairly clear. If in doubt, you could always provide a custom CSS tooltip that works for both keyboard and mouse users that displays the text "Opens in a new window". Alternatively, have a key somewhere on the page (preferable before any links that make use of the icon) to describe the icon meaning.

Cheers
Joe

> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf
> Of JP Jamous
> Sent: 12 July 2018 15:04
> To: 'WebAIM Discussion List' < <EMAIL REMOVED> >
> Subject: [WebAIM] Opens In New Window
>
> Folks,
>
>
>
> If a link opens in a new window, how would you show that visually? I was
> thinking of something like that.
>
>
>
> <a href=http://google.com target="_blank">
>
> <span>
>
> Search for us on Google
>
> </span>
>
> <span class="sr-only">
>
> Opens in New Window
>
> </span>
>
> <span aria-hidden="true" class="show-open-window-icon"></span>
>
> </a>
>
>
>
> Do you folks agree or is there a better way to identify that visually?
> Thanks.
>
>
>
> --------------------
>
> JP Jamous
>
> Senior Digital Accessibility Engineer
>
> <mailto: <EMAIL REMOVED> > E-Mail Me | <http://linkedin.com/in/JPJamous>; Join
> My LinkedIn Network
>
> --------------------
>
>
>
>
>
> > > http://webaim.org/discussion/archives
>