E-mail List Archives
Thread: Opens In New Window
Number of posts in this thread: 17 (In chronological order)
From: JP Jamous
Date: Thu, Jul 12 2018 8:04AM
Subject: Opens In New Window
No previous message | Next message →
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 ADDRESS REMOVED = > E-Mail Me | <http://linkedin.com/in/JPJamous>; Join
My LinkedIn Network
--------------------
From: Joe Chidzik
Date: Thu, Jul 12 2018 9:21AM
Subject: Re: Opens In New Window
← Previous message | Next message →
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
>
From: John Hicks
Date: Thu, Jul 12 2018 9:25AM
Subject: Re: Opens In New Window
← Previous message | Next message →
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 ADDRESS 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
>
> >
From: John Hicks
Date: Thu, Jul 12 2018 9:37AM
Subject: Re: Opens In New Window
← Previous message | Next message →
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 ADDRESS 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 ADDRESS 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
>>
>> >
From: Birkir R. Gunnarsson
Date: Thu, Jul 12 2018 9:44AM
Subject: Re: Opens In New Window
← Previous message | Next message →
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 ADDRESS 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 ADDRESS 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 ADDRESS 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
>>>
>>> >
From: JP Jamous
Date: Thu, Jul 12 2018 9:57AM
Subject: Re: Opens In New Window
← Previous message | Next message →
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
--------------------
From: JP Jamous
Date: Thu, Jul 12 2018 9:59AM
Subject: Re: Opens In New Window
← Previous message | Next message →
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
--------------------
From: Birkir R. Gunnarsson
Date: Thu, Jul 12 2018 8:04PM
Subject: Re: Opens In New Window
← Previous message | Next message →
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 ADDRESS 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
> --------------------
>
>
>
From: glen walker
Date: Fri, Jul 13 2018 9:23AM
Subject: Re: Opens In New Window
← Previous message | Next message →
The codepen UI has an inaccessible alert icon in the style section. It
says you don't need a <style> tag in that block of code but rather just put
the direct CSS. You probably had a <style> tag in your local file and just
copy/pasted it into the style section. Removing the <style> makes the BBC
link work as expected. Weird that the footnote example worked. Codepen
probably has a bug where the <style> tag just messes up the first style
definition.
On Thu, Jul 12, 2018 at 8:04 PM, Birkir R. Gunnarsson <
= EMAIL ADDRESS REMOVED = > wrote:
> 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 (links 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.
>
From: JP Jamous
Date: Fri, Jul 13 2018 9:52AM
Subject: Re: Opens In New Window
← Previous message | Next message →
Thank you guys. I will check those out.
--------------------
JP Jamous
Senior Digital Accessibility Engineer
E-Mail Me |Join My LinkedIn Network
--------------------
From: Birkir R. Gunnarsson
Date: Fri, Jul 13 2018 10:41AM
Subject: Re: Opens In New Window
← Previous message | Next message →
Thanks Glen!
I'll go and fix this Code Pen tonight.
You're right, the icon is totally inaccessible. I had no idea. And,
yes, I copied the <style> element along with the CSS class definitions
from my local file, I was on the fence about whether it was necessary
or not but figured it wouldn't hurt. I was wrong. ;)
On 7/13/18, JP Jamous < = EMAIL ADDRESS REMOVED = > wrote:
> Thank you guys. I will check those out.
>
>
>
> --------------------
> JP Jamous
> Senior Digital Accessibility Engineer
> E-Mail Me |Join My LinkedIn Network
> --------------------
>
>
>
From: Birkir R. Gunnarsson
Date: Sat, Jul 14 2018 8:43AM
Subject: Re: Opens In New Window
← Previous message | Next message →
Updated the CSS< now it works (in Chrome and FF).
On 7/13/18, Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = > wrote:
> Thanks Glen!
> I'll go and fix this Code Pen tonight.
> You're right, the icon is totally inaccessible. I had no idea. And,
> yes, I copied the <style> element along with the CSS class definitions
> from my local file, I was on the fence about whether it was necessary
> or not but figured it wouldn't hurt. I was wrong. ;)
>
>
>
> On 7/13/18, JP Jamous < = EMAIL ADDRESS REMOVED = > wrote:
>> Thank you guys. I will check those out.
>>
>>
>>
>> --------------------
>> JP Jamous
>> Senior Digital Accessibility Engineer
>> E-Mail Me |Join My LinkedIn Network
>> --------------------
>>
>>
>>
From: Fernand van Olphen
Date: Mon, Jul 16 2018 2:59AM
Subject: Re: Opens In New Window
← Previous message | Next message →
Is the use of pseudo elements and the content property not prohibited when the content is non-decorative, according to Failure 87 (success criterion 1.3.1)
https://www.w3.org/TR/WCAG20-TECHS/F87.html ?
Regards,
Fernand van Olphen
Accessibility Advisor
Municipality of The Hague
De disclaimer van toepassing op e-mail van de gemeente Den Haag vindt u op: http://www.denhaag.nl/disclaimer
From: Birkir R. Gunnarsson
Date: Mon, Jul 16 2018 5:03AM
Subject: Re: Opens In New Window
← Previous message | Next message →
Good call, I never thought about it.
CSS content is supposed to be added to an element's accessible name,
according to the accessible name and description calculation
algorithm:
https://www.w3.org/TR/accname-1.1/
(look for "CSS", sadly this document is not easy to navigate).
This is a recent spec and F87 is probably a few years old. This
definitely needs to be cleared up with the education and outreach
group.
On 7/16/18, Fernand van Olphen < = EMAIL ADDRESS REMOVED = > wrote:
> Is the use of pseudo elements and the content property not prohibited when
> the content is non-decorative, according to Failure 87 (success criterion
> 1.3.1)
> https://www.w3.org/TR/WCAG20-TECHS/F87.html ?
>
>
>
> Regards,
>
> Fernand van Olphen
> Accessibility Advisor
> Municipality of The Hague
>
> De disclaimer van toepassing op e-mail van de gemeente Den Haag vindt u op:
> http://www.denhaag.nl/disclaimer
> > > > >
--
Work hard. Have fun. Make history.
From: Birkir R. Gunnarsson
Date: Mon, Jul 16 2018 7:28AM
Subject: Re: Opens In New Window
← Previous message | Next message →
I've filed a WCAG issue to help get this resolved:
https://github.com/w3c/wcag/issues/433
On 7/16/18, Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = > wrote:
> Good call, I never thought about it.
> CSS content is supposed to be added to an element's accessible name,
> according to the accessible name and description calculation
> algorithm:
> https://www.w3.org/TR/accname-1.1/
> (look for "CSS", sadly this document is not easy to navigate).
> This is a recent spec and F87 is probably a few years old. This
> definitely needs to be cleared up with the education and outreach
> group.
>
>
> On 7/16/18, Fernand van Olphen < = EMAIL ADDRESS REMOVED = > wrote:
>> Is the use of pseudo elements and the content property not prohibited
>> when
>> the content is non-decorative, according to Failure 87 (success criterion
>> 1.3.1)
>> https://www.w3.org/TR/WCAG20-TECHS/F87.html ?
>>
>>
>>
>> Regards,
>>
>> Fernand van Olphen
>> Accessibility Advisor
>> Municipality of The Hague
>>
>> De disclaimer van toepassing op e-mail van de gemeente Den Haag vindt u
>> op:
>> http://www.denhaag.nl/disclaimer
>> >> >> >> >>
>
>
> --
> Work hard. Have fun. Make history.
>
--
Work hard. Have fun. Make history.
From: glen walker
Date: Mon, Jul 16 2018 8:28AM
Subject: Re: Opens In New Window
← Previous message | Next message →
I like Birkir's recommended text update that says "whereas CSS content can
be used to communicate helpful information about an element it should not
be used for essential information".
In this particular case, the codepen example provides two different
situations (whether intentional or not). The first example with "opens in
a new window" links, I don't consider that "essential" information. It's
nice to know but as long as the link text is sufficient (2.4.4), whether it
opens in a new window may not be critical. (Although one could argue if
there's a visual clue that the link opens in a new window and that visual
clue is not conveyed to AT, then it's a failure. If there is no visual
clue, that could be a cognitive failure. If this were the only issue on
the site, then congratulations. Typically there are higher priority
failures to deal with.)
The second example for footnotes, with CSS turned off, you would only hear
"one" or "two" for the link names and not that they're footnotes. That
could be pretty important. The section of footnotes does have a heading
before it so you might figure out the context of the "one" and "two", but
then you're making users think <https://www.sensible.com/dmmt.html>. When
displaying a list of links (Ins+F7), the CSS content is included in the
link name as documented in accessible name calculation
<https://www.w3.org/TR/accname-1.1/#step2>. (Note, when I link to the
accessible name calculation, I like to use the "step2" in-page reference
because it goes right to the meat of the calculation. In this case, CSS
pseudo classes are discussed in step F.ii.). With CSS turned on, the link
name is "Footnote 1" and "Footnote 2".
On Mon, Jul 16, 2018 at 7:28 AM, Birkir R. Gunnarsson <
= EMAIL ADDRESS REMOVED = > wrote:
> I've filed a WCAG issue to help get this resolved:
> https://github.com/w3c/wcag/issues/433
>
>
From: Birkir R. Gunnarsson
Date: Mon, Jul 16 2018 6:44PM
Subject: Re: Opens In New Window
← Previous message | No next message
What it comes down to in my mind is that one accessibility spec cannot
contradict another.
If CSS content forms a part of an element's accessible name it is a
legitimate accessibility mechanism whose use cannot be outright
forbidden by WCAG.
It is not straight forward, support for CSS content is not universal,
but by allowing its use for non-essential use cases we can form the
basis for assistive technologies and browsers implementing its use
properly.
The question is what defines essential vs. non essential info.
On 7/16/18, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
> I like Birkir's recommended text update that says "whereas CSS content can
> be used to communicate helpful information about an element it should not
> be used for essential information".
>
> In this particular case, the codepen example provides two different
> situations (whether intentional or not). The first example with "opens in
> a new window" links, I don't consider that "essential" information. It's
> nice to know but as long as the link text is sufficient (2.4.4), whether it
> opens in a new window may not be critical. (Although one could argue if
> there's a visual clue that the link opens in a new window and that visual
> clue is not conveyed to AT, then it's a failure. If there is no visual
> clue, that could be a cognitive failure. If this were the only issue on
> the site, then congratulations. Typically there are higher priority
> failures to deal with.)
>
> The second example for footnotes, with CSS turned off, you would only hear
> "one" or "two" for the link names and not that they're footnotes. That
> could be pretty important. The section of footnotes does have a heading
> before it so you might figure out the context of the "one" and "two", but
> then you're making users think <https://www.sensible.com/dmmt.html>. When
> displaying a list of links (Ins+F7), the CSS content is included in the
> link name as documented in accessible name calculation
> <https://www.w3.org/TR/accname-1.1/#step2>. (Note, when I link to the
> accessible name calculation, I like to use the "step2" in-page reference
> because it goes right to the meat of the calculation. In this case, CSS
> pseudo classes are discussed in step F.ii.). With CSS turned on, the link
> name is "Footnote 1" and "Footnote 2".
>
>
> On Mon, Jul 16, 2018 at 7:28 AM, Birkir R. Gunnarsson <
> = EMAIL ADDRESS REMOVED = > wrote:
>
>> I've filed a WCAG issue to help get this resolved:
>> https://github.com/w3c/wcag/issues/433
>>
>>
> > > > >
--
Work hard. Have fun. Make history.