Product Designer & front-end Developer

Introduction

Opening links on new windows automatically can be disorienting for some folks, if they are not warned in advance. That's why it's recommended to limit its usage. Providing a warning allows the user to decide if they want to leave the current window, and if so, help them find their way back. In this post, we'll discuss about the downsides of new tab links, and explore a few techniques to add an indicator to them, should you need to use them.

Spoiler alert: None of my links open in new tabs, so you're welcome to click away and leave my site if you don't agree with me 😄. Otherwise, let's get started!

Should external links open in new tabs?

A question that might seem simple to answer at first, but when you go beyond the surface, it gets a bit more complicated than that. Should designers code? Should external links open in new tabs? Should I stay or should I go?

All these questions, share the same answer: It depends. When it comes to links though, the debate can get a bit heated up. Marketers will tell you that you need to open them in separate tabs to avoid user drop-off. Yet, contrary to the public belief, it is considered a bad UX practice.

Why opening links in separate tabs is a bad UX practice

There are a handful of reasons why opening links in separate tabs isn’t a good idea:

• You lose the default ← Back browser behavior;
• It’s invasive and disruptive to the flow of the page;
• It could potentially lead to security vulnerabilities;
• Some user agents, like kiosks, are unable to open new windows or tabs;
• It adds yet another opened tab to your (likely) already crammed browser address bar;

But more important than that, it could be difficult to grasp for folks that have difficulty perceiving visual content, and for people with cognitive disabilities. Since the vast majority of screen readers don’t inform users that target=“_blank” links open in new tabs, folks could have a hard time realizing why they can’t use the back button to return to the previous page, and that they might need to switch back to the previous tab to do so.

If it's so bad, then why it's so frequent?

This question is even harder to answer. As stated before, things like bounce rates and time-on-site metrics helped solidify this bad UX pattern. But it goes beyond that: We tend to (wrongly) differentiate internal links (links that point to our own website) from external links (those that point to other sites).

This separation is what the industry calls “a convention”, and many web developers (including myself for a long time) had it deeply rooted in our daily work routine (it’s the way it has to be done!), and that’s how the web got flooded with target=“_blank” attributes in our links.

What should we do, then?

Try your best to avoid them!

• Trust the content you provide (if it’s good enough, rest assured that no external link will stop your users to consume it);
• Educate your clients about why external links could frustrate users and lead to a bad UX while browsing their sites;
• Conduct an A/B testing to convince the Marketing team there’s no significant change in user drop-off;
• Test the site on a screen reader to see how disabled folks interact with these kind of links.

Use cases where opening links in new tabs can be a good idea

There are a few situations where it’s worth opening links in new tabs:

When changing the page would make the user lose unsaved progress.

We’ve all been there. We are filling a form, writing (not reading) a blog post, or completing a checkout process, and we (accidentally or purposefully) click on a link on the page. Almost instantly, a panic feeling embody us: Did I lost everything? 😱.

Even if the page saves your progress, it’s best to keep the user away from that panic situation.

When the user started a process that would stop if the user clicks away.

Let’s say that you’re watching a video, listening to a podcast or music, and you click in a link. All of a sudden you’re taken to a different page and lost your progress. In those cases, it’s safe to either change the behavior of the links to open in new tabs, or warn them that their progress will be lost if they navigate away.

When the user is on a logged in session, and clicking away would destroy that session.

Some old or security-first web apps (such as medical ones) would log you off of your session if you try to access a link that doesn't require you to be logged in. In those cases, it's worth opening the link in a separate tab to persist the logged in state.

These are a few examples where opening links in new tabs would make sense. For a more thorough breakdown, check out this CSS Tricks article.

I really need to keep new tab links. What should I do?

If you stumble upon the scenarios listed above, or if the arguments stated above aren’t enough to convince you, your Marketing team or your stakeholders to ditch new tab links, you must inform your users about this behavior. Failure to do so goes against WCAG 2.0 Guideline 3.2: Predictability.

The best way to state this is by adding text to the link, such as opens in new window:

  <a
    href="https://www.juangarcia.design"
    target="_blank"
    rel="noopener noreferrer"
  >
    My personal website (opens in a new tab)
  </a>

You can even hide the information, and show it on :hover and :focus events:

<a
  href="https://www.juangarcia.design"
  target="_blank"
  rel="noopener noreferrer"
>
  My personal website
  <span class="visually-hidden">This link opens in a new tab</span>
</a>

/* Visually hide the text by default. ⚠️ WARNING! Don't use display:none, otherwise screen readers won't pick it up. */
a span.visually-hidden {
  height: 1px;
  left: -999px;
  overflow: hidden;
  position: absolute;
  top: auto;
  width: 1px;
}

/* Show the indicator when the icon is hovered, focused, or active */
a:hover span.visually-hidden, a:focus span.visually-hidden, a:active span.visually-hidden {
  height: inherit;
  left: inherit;
  top: inherit;
  width: inherit;
}

You can check out how screen readers will render the above content below:

If you decide to hide the indicator and not show it even on :hover and :focus, you still need to provide a visual indicator with an appropriate alt attribute to give a visual hint:

<a href="https://www.juangarcia.design" target="_blank" rel="noopener noreferrer">
	My personal website
	<span class="visually-hidden">This link opens in a new tab</span>
	<img src="/images/new-tab-icon.svg" alt="New Window Icon. This icon indicates that the link will open in a new tab" />
</a>

Check how everything would play together on the Codepen link below:

Conclusion

Good design should put always the users in control. Hopefully, this article helped you understand users should be able to navigate your content in their preferred way, and why new tab links aren't always a good idea. And if you decide to use them, ensure that you make them accessible.