20% Off My Easy-Peasy Proposal with the Coupon Code 20OFF (Now - April 30th)

Accessibility Weekly

Opening Links in New Tabs (or Not)

Published:

amber-200

Amber Hinds

Equalize Digital

Amber Hinds is the CEO of Equalize Digital, Inc., a Certified B Corp specializing in WordPress accessibility, maker of the Accessibility Checker plugin, and lead organizer of the WordPress Accessibility Meetup and WP Accessibility Day conference.

Week 17

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:

A banner promoting the WordPress Accessibility Facebook group with a call-to-action link, “Join the Community,” with a new window icon after it.

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

Join the Conversation!

There's a dedicated thread on this post inside of The Admin Bar community. Join in on the conversation, ask questions, and learn more!

Group Thread
amber-200

Amber Hinds

Equalize Digital

Amber Hinds is the CEO of Equalize Digital, Inc., a Certified B Corp specializing in WordPress accessibility, maker of the Accessibility Checker plugin, and lead organizer of the WordPress Accessibility Meetup and WP Accessibility Day conference.

Through her work at Equalize Digital, Amber is striving to create a world where all people have equal access to information and tools on the internet, regardless of ability. Since 2010, she has led teams building websites and web applications for nonprofits, K-12 and higher education institutions, government agencies, and businesses of all sizes. Through this journey, she learned about the importance of making websites accessible to everyone, and it has been her passion to bring awareness to accessibility and make website accessibility easier, ever since. 

Brought to you by:

Make your WordPress website accessible and ensure all people have equal access to your products or services, regardless of ability. Reach more customers, reduce liability, and increase conversions.

Come Join Us!

Join the #1 WordPress Community and dive into conversations covering every aspect of running an agency!

Kyle Van Deusen

Community Manager

More from Accessibility Weekly

Week 51

How Accessible is “Accessible Enough”

In an ideal world where clients have unlimited budgets and everything is custom, every website would …

Week 50

How to Sell Accessibility in New Builds

Creating websites that prioritize accessibility is no longer just a best practice—it’s a business must, especially …

Week 49

Accessibility in Web Development Contracts

Whether you’re running an agency or freelancing, having a clear contract for your web development and …