Links can open into a new tab or window. However, it isn’t always best for people using your website to have links open in a new tab.
In the Web Design System (WDS) theme, the “open in a new tab” option is available for a text link but not for a button.
A link that opens into a new tab or window overrides the browser’s default behavior. This interferes with people making their own choices.
Only use links that open in a new tab in specific situations, with adequate warning to people.
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 them in the same tab. In browsers, people can 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 in mobile browsers, where there is less indication that the link opens in a new tab.
Also, opening a link to a new page breaks the back button, one of the most commonly used features 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 opens in a new tab unexpectedly.
WCAG Technique G200: Opening new windows and tabs… and G201: Giving users advanced warning… explain when to open links in a new tab and when to provide a warning.
Security
Unless properly coded, links that open in a new tab can create a vulnerability for users (called tabnapping) or degrade a webpage’s performance. Opening a new tab creates a vulnerability on the page to nefarious activity and redirects the page to a malicious site. Depending on what is running, both tabs can reduce your browser’s performance.
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 in the same tab. This often happens when the information used to fill in a form is on a separate page.
Best Practices: Open Links in a New Tab
When it is necessary to open links in a new tab, select “open in 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 be warned when a link opens in a new tab. The three options below are in order from best to least optimal.
- Add (opens in a new tab) to the link.
Note: This is the best option. Everyone knows the link will open in a new tab.
Example: The Top 10 Web Design Mistakes of 1999 (opens in a new tab) - Add the class wsu-
screen-reader-onlyto the link code.
Note: This is a good option, but not the best option. Only some users will know the link opens in a new tab.- 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>
- 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.
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>- For a page where all links open into a new tab.
Note: This information should be prominent. Not everyone will see this information before selecting a link. This is an OK solution. Those who don’t scan or read this section, those who use headings to navigate the page, and those who enter a page farther down from the message will not receive this information.
All links open in 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 the noreferrer noopener attribute. 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 */This code is different from the one used on Checking Links.
Use this code if you want links to open in a new tab and check for noreferrer noopener.
Use Checking Links: Open in a New Tab if you do not want links to open in a new tab.