E-mail List Archives
Re: Alert Text
From: JP Jamous
Date: Nov 13, 2018 4:48PM
- Next message: glen walker: "Re: Alert Text"
- Previous message: glen walker: "Re: Alert Text"
- Next message in Thread: glen walker: "Re: Alert Text"
- Previous message in Thread: glen walker: "Re: Alert Text"
- View all messages in this Thread
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.
Content: " Opens in a new window";
Is it possible to use aria-label instead of content?
Senior Digital Accessibility Engineer
E-Mail Me |Join My LinkedIn Network
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?