Back to posts
  • Web Development
  • User Experience
  • Accessibility

Opening links in new tabs and what it means for UX and Accessibility

Daniel Becker
Daniel Becker
Abstract illustration of an html anchor tag opening a new tab

In the history of the internet the question whether to open links in a new window or not has been a topic of much debate. It has been discussed a lot in web and user experience design and to this day pops up frequently. Many have written about this at length and there’s a lot of nuance to consider. Rather than going into every last detail, this post will be a high-level overview of the main arguments commonly made for and against opening links in new tabs (I’ll refer to tabs and windows interchangeably as this will be handled by the browser configuration and site authors don’t have control over this aspect). For in-depth information I recommend reading some of the articles linked in the appropriate sections.

In the recent blog post on what links are and how they are defined in HTML markup we mentioned attributes that can be configured per link. One such attribute is target which tells the browser where to open the link’s url. If no target attribute is defined, the default value _self will be used. Adding target="_blank" indicates the url should be opened in a new tab (or window), making this a “targeted link”. This is not all that happens though, so in this article we’ll try to give an overview on the implications that should be taken into account when configuring links to open in new tabs.

Arguments for opening links in new tabs

There’s two common arguments that I’ve heard in favor of opening links in new tabs. The first one is that it helps to reduce bounce and increases engagement rates as the original page will stay open longer. During my research I couldn’t find any data to support this claim. In fact, it seems that professional marketeers largely advice to avoid opening links in new tabs. Adrian Roselli has an in-depth blog post on link targets (that I highly recommend for a thorough overview of this topic) and he writes:

Consistently across my searches the only ones who ever make the case for new windows are folks whose paycheck is dependent on hitting bounce rate or time-on-site goals in their site analytics. Adrian Roselli in Link Targets and 3.2.5

The second argument, I’ve heard more often, is that it allows users to easily return to the original page. This one is hard to argue with as even if this is true it depends a lot on the individual behavior of the person visiting the original and linked website. Personally, I think, there’s good reason to assume the opposite: opening links in a new tab switches the context and also starts a new session, which can make it harder for the user to return to the website that they came from. For example because (on desktop browsers like Chrome and Firefox) the back button won’t work as expected. This brings us to the arguments against opening links in new tabs which for the most part are about user experience and accessibility.

Arguments against opening links in new tabs

On the other side of the debate, there’s a lot of arguments against opening links in new tabs. Let’s break them down to better understand the reasoning behind them.

User experience considerations

When discussing user experience (UX) we often talk about intuitive interfaces. The idea is that users should be able to understand how to use and navigate a website without having to think about it. Something that is enabled first and foremost by the fact that many of us have been using websites for a long time now. We got accustomed with how a browser works, how certain interactions behave and thus have developed a mental model of “how websites work”. Part of making experiences feel seamless is to make things work according to expectations. Which in turn often align with default behavior. Making links open in new tabs diverges from the default behavior and likely breaks with user expectations.

It is not the only default behavior that breaks: the back button stops working, too. And with it the linear history trail of pages visited. The two pages now exist in different contexts, making it harder for users to understand how they are related. It makes it harder for users to navigate back to the original page.

Nuances in back button behavior

The back button behavior has been changing in recent years, but at the time of writing still holds true for Chrome and Firefox on desktop. Safari for exaple does enable the back button, the functionality of which changes to close the newly opened tab and jumping back to the tab that originally opened the new one. However, it only works as long as the new user does not leave the newly opened tab. Modal functionality like this tends to be confusing for users, so I’m not convinced this is a good solution.

The biggest drawback to user experience is yet another functionality being altered by the target="_blank" configuration of links. Users can decide how to open links: when a link is clicked it opens in the current tab. Using the right-click context menu users can choose to open the link in a new tab. (The same is true on touchscreens, using taps and long press. And when using a keyboard by holding a meta key Command ⌘ or Control while hitting Enter when a link is focused.) Conversely there’s no way to force the browser to open a link in the same tab. Which means that defining target="_blank" takes away the user’s choice.

It is also worth noting that users can force a link to open in a new window/tab by [Meta Key]-clicking a link. That means both behaviors are available to them for links. […] By using target="_blank", only that behavior is available. Chris Coyer in When to use target=“_blank”

Notable exceptions

There are some notable exceptions to the rule of not opening links in new tabs. One case is when the link is intended to give additional information and should be looked at side-by-side with the page the user is currently on. Another example is when media is playing or the user is in the middle of a task, e.g. completing a checkout or writing a message. A default link would replace the current page, stop the playback and potentially lose the user’s progress. Both of which would probably non-intentional and break expectation in a worse way than a new tab. In these cases opening links in new tabs acts as a failsafe. This changed behavior should be made obvious to the user. For example by adding a visual cue to the link, like an icon or a label (how targeted links should be marked is another debate which we might look at when looking at formatting and styling links). This is also a good opportunity to explain why the link opens in a new tab.

Acessebility considerations

Which brings us to accessibility aspects of links which open a new tab. Changing default behavior might be especially disorienting for users using assistive techonology. Consider a zoomed in screen where a new tab opens outside of the currently visible area.

The accessibility issue is that some users can get confused with the new windows or tabs. WebAIM – web accessibility in mind
In general, it is better not to open new windows and tabs since they can be disorienting for people, especially people who have difficulty perceiving visual content. General Techniques for WCAG 2.0

Security & performance

Opening links in new tabs used to be both, a security and performance issue. As the new link used to be run in the same process as the original page it could try to take over or access data from the page it was opened from. To mitigate this risk a rel="noopener" attribute had to be added to targeted links. However, in most browsers now rel="noopener" is implied when using target="_blank". So while it is still a good idea to add this attribute, it is not as critical as it used to be.

With Site Isolation there’s additional security measures implemented by browsers to prevent malicious websites from taking over the original page (see Site Isolation on Chrome for developers and Introducing Firefox’s new Site Isolation Security Architecture on mozilla Hacks).

I could reproduce the performance issue only by taking drastic measures in an up-to-date Firefox browser, so I consider these issues to be resolved in modern browsers.

Generally, don’t open links in new tabs

Taking all this into account it seems that opening links in new tabs is not a good idea from an accessibility and user experience perspective. It breaks with user expectations, narrows down the options users have. It forces a switch in contexts and makes it harder to navigate back to the original page.

For the most part, always open links in the same browser tab or window. Jakob Nielsen and Anna Kaley in Opening Links in New Browser Windows and Tabs
  1. Should hyperlinks open in new tabs or the same tab?

    In most cases hyperlinks should open in the same tab to maintain user expectations and provide a consistent experience.

  2. What are justified cases for opening links in new tabs?

    Links that offer supplementary information during media playback or uninterrupted tasks like form completion may justifiably open in new tabs to prevent disrupting the user’s current activity.

  3. What are the user experience disadvantages of opening links in new tabs?

    Opening links in new tabs can disrupt the user workflow, confuse the back button functionality, and create a disjointed browsing experience by breaking the linear history trail.

  4. How does opening links in new tabs affect accessibility?

    Especially for those using screen readers or other assistive technologies, new tabs can be disorienting and difficult to manage, as they might not be aware that a new tab has opened.

  5. Are there security concerns with opening links in new tabs?

    Yes, historically there were security issues where a new tab could access data from the original page. Adding rel="noopener" to links opening in new tabs mitigates this risk, although modern browsers now include this by default when target="_blank" is added.

  6. How can opening links in new tabs affect site performance?

    Previously, links opened in new tabs could negatively impact performance by running in the same process as the original page. Again, rel="noopener" mitigates this. Also, modern browsers have addressed this with better isolation and security practices.

Author

Daniel Becker
Daniel Becker

Co-Founder, Head of Tech

Connect on LinkedIn

Similar articles