WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Opens In New Window

for

From: JP Jamous
Date: Jul 12, 2018 9:57AM


Birkir,

If you can share your CSS markup, I'd appreciate it. I have never
implemented it this way.



--------------------
JP Jamous
Senior Digital Accessibility Engineer
E-Mail Me |Join My LinkedIn Network
--------------------


-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
Birkir R. Gunnarsson
Sent: Thursday, July 12, 2018 10:44 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Opens In New Window

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
>>> > >>> >>> >>> archives at http://webaim.org/discussion/archives
>>> >>>
>>
>>
> > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.
http://webaim.org/discussion/archives