Why let someone know when a link opens a new window?
Find out how to warn people ahead of time and why it’s so important

You’ve probably seen this bit of HTML before:
<a href="https://mysite.com" target="_blank" rel="noopener">My site</a>
Specifically, check out the target="_blank"
attribute. This is what allows a link to 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.
Why?
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
For example:
<a href="https://mysite.com" target="_blank" rel="noopener">
My site
<span class="visuallyhidden">, opens in a new window</span>
</a>
When a screen reader encounters this link, it would announce the link 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 thearia-describedby
attribute, setting its value to the appropriateid
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 (aka screen reader sprite sheet) which will hold the variations of the warning message:
1. Add the warning messages
<div hidden>
<span id="new-window-0">Opens in a new window</span>
<span id="new-window-1">Opens an external site</span>
<span id="new-window-2">Opens an external site in a new window</span>
</div>
You may notice this div
container features the hidden
attribute. This is to ensure this chunk of text is not visible nor are screen readers able to find and read the text out of context. That’d be mighty confusing!
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:
<a href="https://mysite.com" target="_blank" rel="noopener" aria-describedby="new-window-0">
My site
</a>
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:
<a href="https://mysite.com" target="_blank" rel="noopener" aria-describedby="new-window-0">
My site
<img src="new-window.svg" alt="">
</a>
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 Windows 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:
<a href="https://mysite.com" target="_blank" rel="noopener" aria-describedby="new-window-0">
My site
<svg aria-hidden="true" focusable="false" …>
<path>
<!-- … -->
</path>
</svg>
</a>
Demo!
Check out the demo in action! Load up a screen reader and listen to how each of the links sound! 🎧
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! 😄⌨️🚀