Open in New Tab

Links can open into a new tab or window. However, it isn’t always best for people using your website for links to open in a new tab.

In the Web Design System (WDS) theme, an option to “open into a new tab” is available for a text link but not a button.

A link that opens into a new tab or window overrides the browser’s default behavior. This interferes with people making the choice themselves.

Three reasons NOT to open a link in a new tab

Usability and User Experience

The default behavior of selecting links in a browser is to open in the same tab. People have the option in browsers to open links in a new tab. For less digitally inclined people, having a link open in a new tab can be disorientating. It can take more effort to get back to where they were. This is especially problematic on mobile browsers where there is less indication about the link opening in a new tab.

Also, opening a link to a new page breaks the back button, one of the top functions used in browsers.

Accessibility

For people using magnification on their computer, they may not know that the link opened into a new tab. People using assistive technology may not receive a notification that the link opened into a new tab. Whether someone uses magnification or a screen reader, people may not know that a link has opened into a new tab. It will take extra effort for people to return to where they were if the link unexpectedly opens into a new tab.

Security

Unless properly coded links that open in a new tab create a vulnerability for people (called tabnapping) or reduce the performance of the webpage. The action of opening a new tab creates a vulnerability of the page for nefarious activity and redirects the page to a malicious site. Depending on what is running both tabs can reduce the performance of your browser.

Use Case for Opening Into a New Tab

WCAG Technique G200: Opening new windows and tab… explains when to open links in a new tab. A common use case is when a page contains information that will disrupt the workflow if opened into the same tab. This often happens when the information for a form is on a separate page.

Best Practices: Open Links in a New Tab

When it is necessary to open links into a new tab select the open “open into new tab” when creating the link. WordPress will add rel="noreferrer noopener" to the link. This will help with security issues.

Accessibility, Usability, and User Experience Concerns

People should have a warning when a link opens in a new tab. The three options below are the best to least optimal options.

1. Add (opens in a new tab) to the link.
   Example: The Top 10 Web Design Mistakes of 1999 (opens in a new tab)
2. Add the class wsu-screen-reader-only to the link code.
   • Select the three dots on the toolbar. Then select Edit as HTML. Add the new code (below) to the end of the link code, before the closing link.
     new code: <span class="wsu-screen-reader-only">(opens in a new tab)</span>

Example

<a rel="noreferrer noopener" href="https://www.nngroup.com/articles/the-top-ten-web-design-mistakes-of-1999/" target="_blank">The Top 10 Web Design Mistakes of 1999 <span class="wsu-screen-reader-only">(opens in a new tab)</span></a>

3. For a page where all links open into a new tab.

How to Check Opens in New Tab and “Noreferrer Noopener”

Use this cascading style sheet (CSS) code to find links that open in a new tab and links without noreferrer noopener. You’ll only see the style when you are logged into the website.

Add this code to Edit CSS under Appearance.

/* Checks for links that open in a new tab & without noreferrer & noopener */
body.logged-in a[target=_blank] {
	color: #000000;
	background-color: orange;
	border: 5px #000000 solid;
	padding: 8px;
}
body.logged-in a[target="_blank"]:not(a[rel="noreferrer noopener"]):after {
	 background: white;
	 content: " doesn't have noreferrer & noopener";
}
/* END Checks for links that open in a new tab & without noreferrer & noopener  */

Examples

Link (opens in a new tab)

Link (opens in a new tab without noreferrer noopener)