WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Opens In New Window

for

From: Birkir R. Gunnarsson
Date: Jul 12, 2018 8:04PM

Here's a draft
https://codepen.io/Wildebrew/pen/yqNWXG

The Code Pen UI is a mess
so I messed something up for the first example (lins that open in new
window based on the target attribute). It works fine on my local file
but the Coe Pen version does not work.
The second example is based on a class selector and it works (in Jaws
with Chrome or Firefox).

I'll fix the example as soon as I have a chance. Feel free to take a
look at the strategy and to use it or ditch it. It's just one approach
to solving the problem. I find a temping solution if we need to add
screen reader text to links that can be targeted with a CSS selector,
much cleaner than adding visually hidden content to individual links.




On 7/12/18, JP Jamous < <EMAIL REMOVED> > wrote:
> No problem John. I just wanted to find out if an icon suffices or a visible
> text would be better.
>
>
>
> --------------------
> JP Jamous
> Senior Digital Accessibility Engineer
> E-Mail Me |Join My LinkedIn Network
> --------------------
>
>
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of John
> Hicks
> Sent: Thursday, July 12, 2018 10:37 AM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Opens In New Window
>
> 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
>>> >>>
>>
>>
> > > http://webaim.org/discussion/archives
> >
> > > > >


--
Work hard. Have fun. Make history.