E-mail List Archives
Thread: Alert Text
Number of posts in this thread: 6 (In chronological order)
From: JP Jamous
Date: Tue, Nov 13 2018 2:06PM
Subject: Alert Text
No previous message | Next message →
I was reading this example on how to inform screen reader users that a link
will open a new window. Is this the best method or is there a more efficient
method using CSS?
http://www.w3.org/TR/WCAG20-TECHS/G201.html
--------------------
JP Jamous
Senior Digital Accessibility Engineer
<mailto: = EMAIL ADDRESS REMOVED = > E-Mail Me | <http://linkedin.com/in/JPJamous>; Join
My LinkedIn Network
--------------------
From: glen walker
Date: Tue, Nov 13 2018 4:35PM
Subject: Re: Alert Text
← Previous message | Next message →
Having a visual indicator is nice, whether that's like the first example in
your URL, having the literal text "opens in a new window", or having an
icon of some sort like WebAIM does (see the link to "WCAG guidelines" on
https://webaim.org/articles/gonewild/#compliance). The icon is added via a
CSS background image *and* extra text is added offscreen via the content
CSS attribute. The extra text is similar to the second example in the URL
you posted but it is not made visible when the link receives focus.
I don't know if this is the "best method". That's kind of subjective. And
these solutions aren't necessarily inefficient (you asked if there was a
more efficient approach).
On Tue, Nov 13, 2018 at 2:06 PM JP Jamous < = EMAIL ADDRESS REMOVED = > wrote:
> I was reading this example on how to inform screen reader users that a link
> will open a new window. Is this the best method or is there a more
> efficient
> method using CSS?
>
> http://www.w3.org/TR/WCAG20-TECHS/G201.html
>
>
From: JP Jamous
Date: Tue, Nov 13 2018 4:48PM
Subject: Re: Alert Text
← Previous message | Next message →
I tried the CSS approach with ::after, but the content is not firing in IE11
regardless of the screen reader. It works in Firefox though.
A[target=_blank]::after {
Content: " Opens in a new window";
}
Is it possible to use aria-label instead of content?
--------------------
JP Jamous
Senior Digital Accessibility Engineer
E-Mail Me |Join My LinkedIn Network
--------------------
From: glen walker
Date: Tue, Nov 13 2018 5:11PM
Subject: Re: Alert Text
← Previous message | Next message →
Flippin Internet Explorer. I hear the same problem. It's the browser and
not the screen reader. Neither JAWS nor NVDA will announce the contents
attribute on IE but both screen readers work fine on Firefox and Chrome and
VoiceOver on iOS works fine too.
Seems like an IE bug and goes against the "Accessible Name and Description
Computation 1.1 <https://www.w3.org/TR/accname-1.1/#step2>" spec. Step 2F
specifically says if the node's role allows "name from content" (which
applies to the link role), then the CSS pseudo elements :before and :after
must be appended to the accessible name.
If you wanted to work around the IE bug, then yes, you could use an
aria-label, but that would require duplicate text. One for the aria-label
and one for the visual text of the link. But you can get around this too
using aria-labelledby and have the link label itself, so to speak.
Something like this:
<span id="external" class="sr-only" tabindex="-1">external link</span>
...
<a id="myself" href="#" aria-labelledby="myself external">wcag guidelines
</a>
That way you don't have to repeat the link text. The "external" id could
be anywhere on the page and all the external links would point to it as
part of their aria-labelledby.
Note also that the "external" text needs tabindex="-1". That's another
Internet Explorer-ism. If the destination elements of an aria-labelledby
are not considered "Accessible HTML Elements", then they need tabindex="-1"
to make them accessible elements. See this microsoft reference -
https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/accessibility/gg701963(v=vs.85)#accessible-html-elements.
I think this aria-labelledby issue only happens on Internet Explorer and
only when you have more than one ID in an aria-labelledby.
And one final note, and this is probably known by everyone on the list
already, if you use an aria-label or aria-labelledby, just make sure the
visible text is contained in the aria-label/labelledby so that speech
recognition software will allow the user to select the link by saying the
text that is visible.
From: JP Jamous
Date: Wed, Nov 14 2018 7:30AM
Subject: Re: Alert Text
← Previous message | Next message →
Thank you Glen. That was the result I was reaching with my testing
yesterday. I knew that this was not deprecated in CSS3.
I was wondering why you used tabindex="-1". That's pretty jacked up
actually.
The last tip, I already knew about.
I heard that in CSS there is a way to test for various cases. Sort of like
If Else statements. It was mentioned to me by a lead developer. It is
something new actually.
I believe it uses the keyword Action.
The functionality is, if this property is not supported by the browser, fall
back to this CSS clause.
Anyone knows anything about this?
--------------------
JP Jamous
Senior Digital Accessibility Engineer
E-Mail Me |Join My LinkedIn Network
--------------------
From: glen walker
Date: Wed, Nov 14 2018 8:01AM
Subject: Re: Alert Text
← Previous message | No next message
> I heard that in CSS there is a way to test for various cases. Sort of
like If Else statements. It was mentioned to me by a lead developer. It is
something new actually....The functionality is, if this property is not
supported by the browser, fall back to this CSS clause.
Perhaps you're talking about the "@supports" query.
https://drafts.csswg.org/css-conditional-3/#at-ruledef-supports