Links should open in the same tab/window

Applicable Role(s): Content Creator, Developer

Overview

Not all users can visually tell a new window or tab is opened, like someone using a magnifier or a screen reader. Or, the user may want to stay in the same browser tab or window so they can easily navigate through their browser history.

Enforcing the behavior within a link can frustrate users who don't realize the link opened elsewhere, or users on mobile devices where it can take more steps to find either the new or previous window. The user should be able to decide where a page opens using their preferences.

Best Practices

Most links should not open in a new tab or window by default using the target="_blank" attribute. By keeping the default link behavior, users can then decide for themselves whether to open the page in a new tab or window. Links that open in the same tab or window are also more secure for your users.

Exceptions

There are two known situations where it is important to open content in a new tab or window.

Opening the link in the same tab will disrupt a form or other process.

If a user is filling out a form and clicks a link that would navigate the user away from the form, the user will likely want to keep where they are at in the form. Here, the linked content should open in a new tab.

Opening the link will log you out of a system.

While this doesn't happen as often anymore, it would be tedious for users to have to log back into systems if a user clicked a link in an authenticated system like Canvas or similar. In that case, opening links in new tabs will keep the user logged in.

Exceptions Note

If either of these situations is the case, the link needs to include a rel="noopener noreferrer" attribute to prevent security exploits.

April 2022 Update: most modern browsers imply "noopener" on a link with target="_blank". The support still lacks in Android browsers and is unknown for Opera, so including rel="noopener noreferrer" will still help.

Pattern Examples

Default Link Pattern (always do when possible)

<a class="..." href="#">Writing Guidelines</a>

Link Text for Opening in New Tab/Window

<a href="#" target="_blank" 
rel="noopener noreferrer">
Writing Guidelines (opens in new tab/window)
</a>

This tells the user the name of the link and warns they will no longer maintain focus on their current browser tab.

Make sure that "(open in new tab/window)" text is within the link and not outside of it.

Do This

Example doesn't go to or open anywhere:

<p>
<a href="#" target="_blank" 
rel="noopener noreferrer">
Writing Guidelines (opens in new window)</a>
</p>
Writing Guidelines (opens in new window)

Don't Do This

Example doesn't go to or open anywhere:

<p><a href="#" target="_blank" 
rel="noopener noreferrer">
Writing Guidelines</a> 
(opens in new window)</p>
Writing Guidelines (opens in new window)