WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Alert Text

for

From: glen walker
Date: Nov 13, 2018 5:11PM

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.