'This link opens in a new window' expanded solution

trog
trog Community Member Posts: 32 ✶ Headliner ✶
edited January 18, 2022 in Web Accessibility
Hey folks, Just thought I’d share how we covered off one of our WCAG requirements using some expanded code, original shared here.

Issue:
Specifically, we wanted to cover off the WCAG requirement: G201: Giving users advanced warning when opening a new window

We wanted to ensure screen reader users get a hyperlink announcement, a “this link opens in a new window” warning.

However, not only did we want to have screen readers announce it, we wanted to add a visual cue to convey link information as well. For visual learners.

Solution:
From this article, https://rockstars.elearningbrothers.com/discussion/448291/screen-reader-hidden-text-for-links
We leveraged the original basic line of code shared:
triv$('[id*=text]', getDisplayDocument()).attr('title', 'This link opens in a new browser window.')
And adjusted and expanded it to better suit our needs to this:
triv$('[id*=text] a[href]', getDisplayDocument()).not('div.Nav a').append(' <img src="newwindow.svg" width=12px; height=12px;><span style=\'position:absolute; clip: rect(0 0 0 0); width:1px;height:1px;overflow:hidden; \'>&nbsp; This link opens in a new browser window</span>')
Thereby changing any text boxes with hyperlinks in them, from this:

to this:

Displaying a nice visual cue, while screen readers would still announce the link name followed by “This link opens in a new browser window.”

Details:
I targeted specifically a[href] tags because we found the original code was putting the hidden text in spots it shouldn’t (such as anchors, areas that had a tags but no hrefs sources associated with it.

This code goes in a OnShow RunJS action on the top level along with an html extension that stores the newwindow.svg. We have a library object of this saved to toss into any course.



In addition, I’ve included an ‘out’ in the code, if ever necessary. Like say, if the hyperlink is not an external link but rather an internal link to another page.
If you give a text box the class of “Nav” then it won’t include the new window text and icon.

Current minor flaw:
However there is still one flaw. A rare issue. Should an action be placed on a question stem text box like so:

Then the “New window icon appears” behind the Question Stem text box. Which it shouldn’t.
I could give the text box the class of ‘Nav’, but I don’t want really to suppress it here, just in case there is a hyperlink to a document/website provided with a test question.

Fortunately, This flaw has never really impacted us as we’ve never needed to add actions to the question stem text boxes in any of our custom eLearning courses.

But if anyone can improve upon the code that’d be great! I’d love to make it perfect. Currently tested in both Lectora 19 and 21 Desktop.

Or maybe you have an even better way of doing it. Please share. It'd be great to see alternatives.

Moreover, if this functionality could be built into Lectora, even better!
Perhaps allow users to select their own new window icon and the text to announce with the ability to opt out.

Thanks all for making a great product even better!

PS. If people are interested, I also have code to do the same thing for a button. It adds a new window icon in the inner corner of an icon/text button along with the hidden text when you give the button a specific class name.

Cheers
Trev