Opening Links in New Tabs (or Not)

Target=”_blank”: it’s so easy to add this to HTML code or to toggle the checkbox in the WordPress editor to set links to open in new tabs, and we frequently do it without a second thought.

Many people operate by this logic, “If a link goes to a different website, then it should open a new tab so that users don’t lose my website.”

Are links opening new tabs bad for accessibility?

If a link opens a new window or tab, it can be disorienting for some users, particularly those with low or no vision or who have cognitive disabilities. When a link opens a new tab, the back button in the browser no longer works, and instead, users have to close the tab to return to the content they were previously on. This can disrupt their browsing experience, particularly if they do not know that a new tab opened.

For this reason, it is generally considered a best practice to almost never open links in new tabs or windows and to allow users the choice to open links in new tabs or not (which they can do by right-clicking the link and choosing to open a new tab or via a keyboard shortcut).

When Links Opening New Tabs is Needed

There is one major instance in which you need to have links open new windows or tabs: when the link is in the middle of a form or multi-step process, and clicking the link would cause the user to lose progress in the form or process if it opened in the same tab.

For example, any time you’re creating a form, and you add a checkbox that says, “I agree to the terms and conditions” with “terms and conditions” linked to that policy, you want that link to open a new tab. Nothing is more frustrating than clicking a link in a form and losing the page, then having to start over from the beginning.

Links Opening New Tabs and WCAG

Generally, when doing an accessibility audit, we’ll fail a link that is set to open a new window or tab under Web Content Accessibility Guidelines (WCAG) under

• 3.2 Predictable, a top-level category that says you need to make Web pages appear and operate in predictable ways, or…
• The AAA success criterion, 3.2.5 Change on Request. This success criterion requires that context changes are initiated only by a user request or a mechanism is available to turn off such changes. New browser tabs or windows are considered context changes.

For WCAG compliance, links with target=”_blank” will be failed if they don’t have a visual and auditory warning on them telling the user they will open a new tab. This is a little fuzzy as a WCAG requirement at the AA level (vs. a best practice) but is more clearly a requirement at the AAA level.

Warning About Links That Open New Tabs

We try, as much as possible, to get clients and content creators not to open links in new windows or tabs. Rethink the urge to click that new window toggle just because you’re linking to something off-site.

But, in a situation where a new window link is needed – or when you have given up battling your client – the way to improve the accessibility of these links is to warn the user that the link will open in a new tab or window before they click the link. Generally, you do this with a visible icon and hidden screen reader text.

How to Warn About Links Opening in New Tabs

Here’s an example of this on the Equalize Digital website:

The code for this link is:

<a href="<https://www.facebook.com/groups/wordpress.accessibility>" class="primary-button" target="_blank" rel="noopener">Join the Community <i class="fas fa-external-link-alt" aria-hidden="true"></i><span class="screen-reader-text"> opens a new window</span></a>

You can see that inside the link, we have done two things to warn users:

1. Added a Font Awesome icon so that sighted people know the link opens in a new tab. That’s this code:<i class=”fas fa-external-link-alt” aria-hidden=”true”></i>Note that we added aria-hidden on it so that screen readers will ignore it and won’t say “image” when reading the link.
2. Added screen reader text so that people who are blind or have low vision and use a screen reader will hear that the link will open in a new window. That’s this code: <span class=”screen-reader-text”> opens a new window</span>Helpful note here: This span starts with a space so that the screen reader doesn’t attempt to read “community” and “open” as one word. Adding a span tag doesn’t add a space, so you need the space either before or in your span tag.

If you have one or two links that open in new tabs, you could easily add this manually to each link. But if you have many links that open new tabs, you don’t want to add these warnings one by one.

Automatically Warning About New Window Links

If there are many links on the website that open in a new tab, you want to add warnings to them all automatically. You can code this with JavaScript using target=”_blank” as a selector (I can’t find a good tutorial for that, unfortunately).

If you don’t want to code it yourself, my company has a free plugin, Accessibility New Window Warnings, that will automatically create all of these warnings for you. It also has the bonus of automatically removing all the “Link Opens New Window or Tab” warnings in Accessibility Checker across your entire site when activated if you’re using Accessibility Checker.

You can use our plugin or download it and check out the code if you want to package similar functionality into a custom theme.

Additional Resources

• Link Targets and 3.2.5 by Adrian Roselli
• Link Opens New Window or Tab Accessibility Checker Documentation
• Techniques for WCAG 2.0 G201: Giving users advanced warning when opening a new window