Last updated January 13, 2021
This guide explores when and how to have links open in a new tab while prioritizing accessibility.
Having links open in a new tab or window is usually 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 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
In most cases, it is more accessible not to open links in a new tab or window. However, there are a few exceptions.
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 form in a new tab or window avoids interrupting playback.
- Leaving the page causes the user to lose their work, such as on a fillable form. In that case, we encourage adding a warning message to notify the user of how to save their data.
- There is a checklist or instructions the user must reference in order to complete a task on the new tab or window.
How to include warnings
If you need to set a link to open in a new tab or page, it is best practice to add a warning so that the user knows what to expect. Here are two ways to notify your users:
- You can add “opens in new tab” following 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>