Links That Open New Tabs
How to communicate clearly when a link opens in a new context
Opening a link in a new tab or window without warning can disorient users - particularly those using screen readers, keyboard navigation, or those who are less familiar with browser behavior. If a link opens in a new context, that behavior should be communicated in the link text.
What to avoid
<a href="https://example.com/catalog" target="_blank">
View the catalog
</a>- Opens in a new tab without informing the user
- Screen reader users navigating by links have no way to predict the behavior
- Can break expected back-button navigation - the back button does not work in a new tab
- Users may not realize a new tab opened and become confused about their location
Best practice
<a href="https://example.com/catalog" target="_blank" rel="noopener">
View the catalog (opens in a new tab)
</a>Clearly communicates the behavior before the user activates the link. Users can make an informed decision about whether to proceed.
Icon alternative
If your design uses an icon to indicate new-tab behavior, ensure it has an accessible text equivalent:
<a href="https://example.com/catalog" target="_blank" rel="noopener">
View the catalog
<svg aria-hidden="true" focusable="false"><!-- new tab icon --></svg>
<span class="sr-only">(opens in a new tab)</span>
</a>Should you open links in new tabs at all?
The general guidance is to avoid opening links in new tabs unless there is a clear reason - for example, when the link leads away from a form the user is filling in, or to an external resource the user will need alongside the current page. Default browser behavior (same tab) is more predictable. When in doubt, do not use target="_blank".
Always include rel="noopener" on links with target="_blank" to prevent the opened page from having access to your page via window.opener, which is a security concern.
Why it matters
Unexpected context changes disrupt navigation and create confusion - particularly for screen reader users and keyboard-only users who may not have an obvious cue that something changed. Communicating new-tab behavior restores predictability and user control.