WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Alert Text


From: JP Jamous
Date: Nov 13, 2018 4:48PM

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

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

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