WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Alert Text

for

From: JP Jamous
Date: Nov 14, 2018 7:30AM

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
--------------------


-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of glen
walker
Sent: Tuesday, November 13, 2018 6:11 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Alert Text

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