Links should open in the same tab/window
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.
Users are able to opt in to opening links in new tabs or browsers if they choose. Links that are set to open in new tabs/windows have no override for this behavior, so users are forced into a new tab/window whether they prefer that behavior or not. The user should be able to decide where a page opens using their preferences.
Best Practices and Tips
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.
Examples/Patterns
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)