You’ve probably seen this bit of HTML before:
Specifically, check out the target=”_blank” attribute. This is what make a link open a new tab or window automatically. Whether or not you should even use this attribute is debatable, but this is out of scope of this post.
The information being shared here is an approach I’ve been using to help inform people who rely on assistive technology, such as a screen reader, when a link opens a new window.
It’s a valid question. Why inform someone that activating a link might open a new window or a third-party site?
Well, without this context, people might believe they’re following an internal site link in the same browser window. Applying target=”_blank” to open a new tab would cause extra work for sighted keyboard-only users and screen reader users. If they’re unprepared to move away from the current site, they’d need to switch back to the previous tab or window.
Give power to the user—let them decide how they’d like to proceed
The idea is to give power to the user; inform the user of what might happen in order to allow a decision to be made on how and when they’d like to proceed.
How I used to accomplish this
Back in the day I used to recommend adding a “visually hidden” element along side the link text content.
The visuallyhidden CSS class definition hides content visually, but remains available for screen readers users to consume
When a screen reader encounters this link, it would announce the links as:
My site, opens in a new window
This works well and has been for years. The issue though is the odd time the link text and the visuallyhidden content is actually announced in reverse order! There’s a seemingly impossible-to-fix bug that occurs, sometimes, and as a result, I try my best to stay away from this solution.
My approach as of late
What I recommend as a solution to informing people that a link opens a new window is, in my opinion, much cleaner and less “CSS hacky” feeling (sorry, Snook. ❤️)
My solution is this:
- Add a new container element to the DOM which houses any required variants of the warning message
- Each variant element will have a unique IDREF to use elsewhere in the app
- When a link features the target=”_blank” attribute, add the aria-describedby attribute, setting its value to the appropriate id of the message to be announced
This probably sounds like a lot of extra work, but let’s take a look at an example.
Example of what I’m talkin’ about
First, add the HTML container which will hold the variations of the warning message:
1. Add the warning messages
You may notice this div container features aria-hidden and the visuallyhidden class. This is to ensure screen readers don’t find this chunk of text out of context and have it read aloud. That’d be mighty confusing!
And yes, I believe there’s still a place for the visuallyhidden CSS class definition, just used in a different way here.
Now that we have these warning messages available, we can easily reference them as required. It might be best to place in a more “global” template in order to access from anywhere in your app.
Next up, including the warning message in the link.
2. Include the warning message
Let’s alter the example used above:
Now with the aria-describedby attribute pointing toward the first warning message element, the link now reads as:
“My site — Opens in a new window”
(Note: The long-dash here is just to point out that aria-describedby can sometimes generate a pause in-between the link text and the warning message content.)
With this in place, the link text will be read aloud, pause, then the warning message that the link opens a new window. Nice! 💪
That’s neat for screen readers, but what about a visual affordance?
I did mention sighted keyboard-only users earlier. How do we inform a sighted user that a new window will open, visually?
One approach is to use an icon alongside the link text. With an icon, someone who can see the icon will get the notice that something different might occur when I activate this link.
I don’t think an icon is required in all contexts, such as a listing of social media icon links, or perhaps copyright style links in a footer section. When it comes to links in body copy, however, it’s a good idea to add some sort of visual indicator, just as folks using a screen reader get an audible notice.
An example of the visual indicator
Let’s say you’ve got an icon that’s suitable. Usually some boxy looking icon with an arrow pointing in an upward direction.
Perhaps something like…
Yes, that’ll do. Now that we have our icon, let’s include it in the link:
Now, you might be tempted to include your icon as a background image via CSS. The thing is though, most CSS background properties are stripped away when it comes to rendering CSS in Widows High Contrast mode. As a result, it’s best to include the icon as a foreground image.
Alternatively, you could include the raw SVG markup in the link as well. Observe:
Now everyone’s well informed
Nice job! With the aria-describedby attribute on the link along with the “new window” img icon alongside the text, all of you users will be able to make an informed decision of if and when to activate the link, either now or later when they’re good and ready! 👍
Happy hacking! 😄⌨️🚀