Should I Stay or Should I Go? External links, Accessibility and New Tabs
Table of Contents:
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.
More from the blog
- Takes 2 min to read.
Responsive Background Images with image-set
When we talk about responsive images, we tend to associate it with the HTML way of doing that, using srcset, sizes or the <picture> element. We were able to set different images in CSS using @media queries since forever, but the syntax was a bit cumbersome. However, CSS also has a less-known way of setting different images based on the screen resolution: The image-set() function.
- Takes 2 min to read.
Towards privacy-first email
With all the hype that is going on with Hey.com, the new email service, it is time to talk about a much bigger issue than a cluttered email inbox: Privacy.
- Takes 4 min to read.
Ditching the mailto link: Click to Copy Email pattern
According to the statistics, less than 15% of desktop users configure their native apps for email sending. If this is so infrequent, then why we all slam mailto: links in our websites? In this post, we’ll explore some alternate techniques, along with some use cases where it’s worth using it.
- Takes 2 min to read.