When to open links in a new tab
Last updated:
This guide explores when and how to have links open in a new tab.
In most cases, having links open in a new tab or window is not accessible. Read on to learn why this practice is generally considered inaccessible, and when there may be exceptions.
Accessibility considerations
Having links open in a new tab or window is generally considered inaccessible. Here are some reasons why:
- Links opening in a new tab can be disorienting for people with low vision or who are navigating via screen reader, especially when there is no prior warning.
- Users might not understand that they cannot use the “back” button to return to the previous page.
Read more about external links, new tabs, and accessibility.
When to open links in a new tab
There are a few exceptions where opening a link in a new tab may be best. Consider opening a link in a new tab or window in the following cases:
- The link is on a page with embedded playable media. In this case, opening the link in a new tab or window avoids interrupting playback.
- Leaving the current page could cause the user to lose their work, such as on a fillable form.
- The current page contains a checklist or instructions the user must reference in order to complete a task in the new tab or window.
If a link opens in a new tab or window, it should include a warning that lets the user know the link will open in a new window.
How to include warnings
If you need a link to open in a new tab or window, it is best practice to add a warning so the user knows what to expect. Here are two ways to notify your users:
- You can write “opens in new tab” directly in the link text.
- You can use the aria-label attribute to add custom link text that will only be read by devices like screen readers.
Note: The aria-label attribute overrides the link text entirely, so be sure that your aria labels contain both meaningful link text AND a warning, e.g., aria-label=”Google search, link opens in a new tab.” More information on writing meaningful link text.
The following HTML is a link to Google search with an aria-label attribute:
<a aria-label="Google search, link opens in a new tab" href="https://www.google.com" target="_blank" rel="noopener noreferrer">Google search</a>Get help from the Center for User Experience (CUE)
We partner with you to create accessible, usable, and inclusive digital spaces through free evaluations and consultations.