WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Opens In New Window

for

From: Birkir R. Gunnarsson
Date: Jul 12, 2018 9:44AM

If you use screen reader only text, I recommend put it in parenthesis
<a href="#" class="newWindow">
<span>Google</span>
<span class="srOnly" (Opens in new window)</span>
</a>
You could also use CSS::after pseudo elemetto insert the screen reader
only text "Opes in new window" on all links with that particular class
(the class being the icon).
That is valid per the accessible name calculation and works pretty
well (outside of IE).
I can throw together a CodePen from my experiment code if desired,
though it won't be until tonight.


On 7/12/18, John Hicks < <EMAIL REMOVED> > wrote:
> Whoooops, please excuse the hurried and irrelevant response!
> I see your example caters for all.
> My bad.
>
>
> 2018-07-12 17:25 GMT+02:00 John Hicks < <EMAIL REMOVED> >:
>
>> It can't be only for screen readers because this problem mostly effects
>> people with visual impairements using screen magnifiers.
>>
>> You need to work it into a (longer) title attribut, or include it in
>> parentheses in the link text itself.
>>
>> .
>>
>> 2018-07-12 17:21 GMT+02:00 Joe Chidzik < <EMAIL REMOVED> >:
>>
>>> 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
>>> >
>>> > --------------------
>>> >
>>> >
>>> >
>>> >
>>> >
>>> > >>> > >>> archives at
>>> > http://webaim.org/discussion/archives
>>> > >>> >>> >>> >>> >>>
>>
>>
> > > > >


--
Work hard. Have fun. Make history.