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:

1. Add a new container element to the DOM which houses any required variants of the warning message
2. Each variant element will have a unique IDREF to use elsewhere in the app
3. 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 (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! 😄⌨️🚀