External links: In or Out

Large part of today’s web is currently built on modern content management systems that enable developers, designers, and content authors to decide the functionality of the components at global and at the page level. All the content creation is done in WYSWYG editors.  It is the designers and the content author’s responsibility to ensure which links should open in new window if it is necessary for the functionality or to provide a better user experience.

Opening external links in new window is not a good usability and accessibility practice, but I often come across SEO and marketing professionals believing that opening links in new tab will help with bounce rate and user retention on the website. This is not true mostly, if the user has found an external link and decided to explore, the user has the ability to open the link in new window. Here the content author has no say and should not modify the behavior of the links.

Does opening links in new window benefit SEO?

Google’s John Mueller was asked if opening links in a new window versus the existing window (tab) would be effective SEO or ranking wise in Google.

John said no, there is no difference for ranking purposes.

Why is it a bad practice to open external links in a new window?

Further to the argument, the following reasons should be considered:

1. Popups are blocked by default in most of the browsers
2. Users generally do not expect to leave the site or the window when links are activated as that would distract their focus
3. For many user groups, this is an unpredictive action from the site and they may get disoriented by sudden opening of links in a new window unless it is advised before.

When to Open Links in a New Tab?

1. Opening a page containing context-sensitive information, such as help instructions, or an alternate means of completing a form, such as a calendar-based date picker, will significantly disrupt a multi-step workflow, such as filling in and submitting a form, if the page is opened in the same window or tab.
2. The user is logged into a secured area of a site and following a link to a page outside of the secured area would terminate the user’s logon. In this case opening external links in an external window allows the user to access such references while keeping their login active in the original window.

According to G200 technique from WCAG, it is recommended that all links that open in new tab should be provided with an advanced warning. This reduces ambiguity and helps users to have a seamless experience during navigation, when links open in new window without warning users do not have ability to go back to previous page by activating the browser back button.

How to let someone know when a link opens a new window?

We have already discussed that opening links in a new window is not a best practice in terms of usability and accessibility, but if you would like to open links in new window which might be situational or a design necessity on the product end, we have few solutions that might provide a better experience for the user groups we are targeting.

Add the hint in the link text

The straightforward way to inform all users that links open in new window is to provide the hint directly as part of the link text to remove any ambiguity. This practice is not widely adopted due to design considerations.

Working Example

Code for Hint in the Link Text

<a href="https://www.digitala11y.com" target="_blank">
  Digital Accessibility Blog (opens in a new tab)
</a>

Nil

Nil

Using SR-only class

If you feel that Having “opens in new tab” as part of the link text is not visually appealing, the alternative is to hide the hint using CSS and make it accessible for users when they hover or focus on the link using the keyboard. This can be achieved by using the SR-only class,

Working Example

The only downside of this approach is that sighted users cannot distinguish which links open in new window by perceiving the page visually.

Code for SR-Only Class

<a href="https://example.com" target="_blank" rel="noopener">My Link <span class="sr-only">(opens in new tab)</span></a>

<style>
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
</style>

Nil

Adding a Visual Cue

As we have discussed the SR-only class does not help all the users distinguish links that open in new window quickly, we can use a visual cue like an icon to reduce the cognitive load.

Working Example

In this case, the SVG will add an icon to all the links that “opens in new tab.”, THE TITLE IN THE svg PROVIDE THE NECESSARY HINT TO USER THAT LINK OPENS IN NEW TAB.

Code for Visual Cue

<a href="https://example.com" target="_blank" id="my-link" rel="noopener">
  My Link
  <svg width="25" height="25" viewBox="0 0 24 24">
    <title>Open in new window</title>
    <path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"></path>
  </svg>
</a>

<style>
a#my-link svg {
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
  fill: currentColor;
}
</style>

<script>
var link = document.getElementById('my-link');
link.addEventListener('click', function(event) {
  event.preventDefault();
  window.open(this.href, '_blank');
});

</script>

Title attribute with an icon

Another method of providing the hint is to use the title attribute on the link along with icon for visual cue. While title attribute is discouraged on links to provide additional information, here the title attribute will add as a tooltip for the users who hover the link with a mouse. Please note that title attributes do not visually present the tooltip during keyboard and touch interactions.

Working Example

Code for Title Attribute with Icon

<a href="https://example.com" target="_blank" title="Open in new window" id="my-link" rel="noopener">
  My Link
  <svg width="25" height="25" viewBox="0 0 24 24">
    <title>Open in new window</title>
    <path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"></path>
  </svg>
</a>

<style>
a#my-link svg {
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
  fill: currentColor;
}
</style>

<script>
var link = document.getElementById('my-link');
link.addEventListener('click', function(event) {
  event.preventDefault();
  window.open(this.href, '_blank');
});
</script>

Using aria-label

Using the aria-label on the links to modify accessible name is generally not a good practice and when an incorrect implementation takes place it is going to become a blocker for assistive technology users. This post was inspired by such implementation during one of my research projects.

The bad example code below contains aria-label as “opens in a new tab” which will be the accessible name for the link. Here screen reader will announce “opens in a new tab” instead of the link name along with the hint. inspecting the code more closely we see the code “class=”rank-math” which gives the information that this is being generated from a WordPress plug-in called Rank Math. A lot of content management systems are providing a feature to “open the links in new tab” and seem to get it wrong. Using the aria-label to provide the hint will replace the accessible name for the assistive technology users and users who rely on screen readers only hear the announcement “opens in new tab” which is disorienting and not helpful to the user to act.

If we take the route of using the aria-label to provide the accessible name along with the hint, then the link text must be part of the aria-label along with the term “opens in new tab.”

Bad Example

<a aria-label="(opens in a new tab)" href="https://getbootstrap.com/" target="_blank" rel="noreferrer noopener" class="rank-math-link">Bootstrap</a>

Working Example (Good)

Please ensure that icon is provided as a visual cue for the users to distinguish that links open in new window when using the aria-label.

Code for Aria-Label Attribute with Visual Cue

<a href="https://www.example.com" aria-label="Link opens in new window (example.com)" target="_blank">Example <svg aria-hidden="true" focusable="false" width="12" height="12" viewBox="0 0 24 24" role="img" fill="currentColor" 
    xmlns="http://www.w3.org/2000/svg">
    <path d="M14 3v2H5v11h11v-2h-8V3h8zm-2 8h-2V7h-2v2h-2v2h2v2h2v-2h2v6H12v-4z"></path>
</svg></a>

<style>
svg {
    margin-left: 5px; /* to add spacing between text and icon */
    vertical-align: middle; /* to align icon with text */
    fill: #006621; /* color of icon */
}
</style>

Nil

Using aria-describedby

One of the most optimized methods is to use the aria-describedby attribute to provide the necessary hint along with visual cue.

Working Example

Code for Aria-Describedby Attribute with Visual Cue

<a href="https://example.com" target="_blank" aria-describedby="my-hint" id="my-link" rel="noopener">
  My Link
  <svg viewBox="0 0 24 24">
    <title>Open in new window</title>
    <path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"></path>
  </svg>
</a>
<span id="my-hint" class="sr-only">(opens in new window)</span>

<style>
a#my-link svg {
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
  fill: currentColor;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

</style>

<script>
var link = document.getElementById('my-link');
link.addEventListener('click', function(event) {
  event.preventDefault();
  window.open(this.href, '_blank');
});
</script>

Conclusion

Often there are arguments that people do not realize links can be open in new window and think it is handled by the website or the browser, the primary argument during a research is that it is the content and information that user is focused on and the user will not be able to get back to the source or the page if user moves few levels deep while browsing.

As discussed at the start of the article, it is a balanced act. There are use cases where links opening in new window gives better user experience. For example, take Google, user has the ability to choose in settings if links open in new window, as the site is focused on research it makes sense to open links in new tab/window. This enables parallel reading experience for readers and researchers.

However, this does not apply to all situations and scenarios. So, links opening in new window must be provided wisely and sparingly. When provided, provide additional and advance warnings so users know what they are facing and it provides better user experience.