DHT

How to start a fight in a web team

All links should open in the same window

by Dylan Thomas
Published:
Last Update:
Reading time:
4 min

All links should open in the same window

This is a tiny, albeit immensely controversial statement.

But it shouldn’t be–it’s been recognized and recommended as a best practice since the earliest days of the web. Somewhere along the way, we lost sight of that in pursuit of juicing metrics and forgot why we started in the first place.

Below are 4 reasons why you should default all linking to the same window. All are sufficient on their own to make you rethink your linking strategy. If you have an argument that can override all these concerns, I would love to hear it. (Really, I would).

  • Accessibility & Compliance
  • User Experience (UX)
  • Measurement Accuracy
  • Efficiency

Accessibility & Compliance

Whether you think of accessibility in terms of compliance, audience expansion, or just the right thing to do– it’s a requirement for your business.

For websites to be accessible and pass WCAG 2.1, you should avoid opening links in new windows. If you do open links in new windows you should indicate that to both screen readers and sited users. This is a great example of universal design because designing for the most challenging use case improves the experience for all.

Here’s an example on what that looks like visually and in code:

BlueModus

HTML:

<a href="https://bluemodus.com"
   target="_blank"
   aria-label="BlueModus (opens new window)"
   class="external">BlueModus</a>

CSS:

<style>
    .external::after{
        background-size: 24px 24px;
        display: inline-block;
        width: 24px; 
        height: 24px;
        content:"";
        background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Igp3aWR0aD0iMjQiIGhlaWdodD0iMjQiCnZpZXdCb3g9IjAgMCAxNzIgMTcyIgpzdHlsZT0iIGZpbGw6IzAwMDAwMDsiPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0ibm9uemVybyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lY2FwPSJidXR0IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9IiIgc3Ryb2tlLWRhc2hvZmZzZXQ9IjAiIGZvbnQtZmFtaWx5PSJub25lIiBmb250LXdlaWdodD0ibm9uZSIgZm9udC1zaXplPSJub25lIiB0ZXh0LWFuY2hvcj0ibm9uZSIgc3R5bGU9Im1peC1ibGVuZC1tb2RlOiBub3JtYWwiPjxwYXRoIGQ9Ik0wLDE3MnYtMTcyaDE3MnYxNzJ6IiBmaWxsPSJub25lIj48L3BhdGg+PGcgZmlsbD0iI2YwMzgzOCI+PHBhdGggZD0iTTE0Ni43NzY2OSwxNy44NDY2OGMtMC4yNjQ3MSwwLjAwODcgLTAuNTI4NzMsMC4wMzIwNiAtMC43OTA4NiwwLjA2OTk5aC00NS42NTI1MWMtMi41ODQ1NiwtMC4wMzY1NSAtNC45ODg1OCwxLjMyMTM2IC02LjI5MTUzLDMuNTUzNzZjLTEuMzAyOTUsMi4yMzI0IC0xLjMwMjk1LDQuOTkzNDIgMCw3LjIyNTgyYzEuMzAyOTUsMi4yMzI0IDMuNzA2OTcsMy41OTAzMSA2LjI5MTUzLDMuNTUzNzZoMjkuMjgyNTVsLTQ4LjY4Mjk0LDQ4LjY4Mjk0Yy0xLjg3MjIzLDEuNzk3NTIgLTIuNjI2NDEsNC40NjY3NSAtMS45NzE2OCw2Ljk3ODI1YzAuNjU0NzIsMi41MTE1IDIuNjE2MDUsNC40NzI4MiA1LjEyNzU1LDUuMTI3NTVjMi41MTE1LDAuNjU0NzIgNS4xODA3MywtMC4wOTk0NiA2Ljk3ODI1LC0xLjk3MTY4bDQ4LjY4Mjk0LC00OC42ODI5NHYyOS4yODI1NWMtMC4wMzY1NSwyLjU4NDU2IDEuMzIxMzYsNC45ODg1OCAzLjU1Mzc2LDYuMjkxNTNjMi4yMzI0LDEuMzAyOTUgNC45OTM0MiwxLjMwMjk1IDcuMjI1ODIsMGMyLjIzMjQsLTEuMzAyOTUgMy41OTAzMSwtMy43MDY5NyAzLjU1Mzc2LC02LjI5MTUzdi00NS43MDE1YzAuMjc5ODcsLTIuMDg0IC0wLjM2OTUsLTQuMTg1NzggLTEuNzc2MTQsLTUuNzQ4NzFjLTEuNDA2NjQsLTEuNTYyOTMgLTMuNDI4NjQsLTIuNDI5MzQgLTUuNTMwNSwtMi4zNjk3OHpNNDQuNzkxNjcsMjguNjY2NjdjLTE0Ljc1MzcsMCAtMjYuODc1LDEyLjEyMTMgLTI2Ljg3NSwyNi44NzV2NzEuNjY2NjdjMCwxNC43NTM3IDEyLjEyMTMsMjYuODc1IDI2Ljg3NSwyNi44NzVoNzEuNjY2NjdjMTQuNzUzNywwIDI2Ljg3NSwtMTIuMTIxMyAyNi44NzUsLTI2Ljg3NXYtMzQuMDQxNjdjMC4wMzY1NSwtMi41ODQ1NiAtMS4zMjEzNiwtNC45ODg1OCAtMy41NTM3NiwtNi4yOTE1M2MtMi4yMzI0LC0xLjMwMjk1IC00Ljk5MzQyLC0xLjMwMjk1IC03LjIyNTgyLDBjLTIuMjMyNCwxLjMwMjk1IC0zLjU5MDMxLDMuNzA2OTcgLTMuNTUzNzYsNi4yOTE1M3YzNC4wNDE2N2MwLDYuOTc1NjMgLTUuNTY2MDMsMTIuNTQxNjcgLTEyLjU0MTY3LDEyLjU0MTY3aC03MS42NjY2N2MtNi45NzU2MywwIC0xMi41NDE2NywtNS41NjYwMyAtMTIuNTQxNjcsLTEyLjU0MTY3di03MS42NjY2N2MwLC02Ljk3NTYzIDUuNTY2MDMsLTEyLjU0MTY3IDEyLjU0MTY3LC0xMi41NDE2N2gzNC4wNDE2N2MyLjU4NDU2LDAuMDM2NTUgNC45ODg1OCwtMS4zMjEzNiA2LjI5MTUzLC0zLjU1Mzc2YzEuMzAyOTUsLTIuMjMyNCAxLjMwMjk1LC00Ljk5MzQyIDAsLTcuMjI1ODJjLTEuMzAyOTUsLTIuMjMyNCAtMy43MDY5NywtMy41OTAzMSAtNi4yOTE1MywtMy41NTM3NnoiPjwvcGF0aD48L2c+PC9nPjwvc3ZnPg==') 50% 50% no-repeat;
        background-size: 100%;
    }

    .external:hover::after{ 
        background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Igp3aWR0aD0iMjQiIGhlaWdodD0iMjQiCnZpZXdCb3g9IjAgMCAxNzIgMTcyIgpzdHlsZT0iIGZpbGw6IzAwMDAwMDsiPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0ibm9uemVybyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lY2FwPSJidXR0IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9IiIgc3Ryb2tlLWRhc2hvZmZzZXQ9IjAiIGZvbnQtZmFtaWx5PSJub25lIiBmb250LXdlaWdodD0ibm9uZSIgZm9udC1zaXplPSJub25lIiB0ZXh0LWFuY2hvcj0ibm9uZSIgc3R5bGU9Im1peC1ibGVuZC1tb2RlOiBub3JtYWwiPjxwYXRoIGQ9Ik0wLDE3MnYtMTcyaDE3MnYxNzJ6IiBmaWxsPSJub25lIj48L3BhdGg+PGcgZmlsbD0iIzAwMDBmZiI+PHBhdGggZD0iTTE0Ni43NzY2OSwxNy44NDY2OGMtMC4yNjQ3MSwwLjAwODcgLTAuNTI4NzMsMC4wMzIwNiAtMC43OTA4NiwwLjA2OTk5aC00NS42NTI1MWMtMi41ODQ1NiwtMC4wMzY1NSAtNC45ODg1OCwxLjMyMTM2IC02LjI5MTUzLDMuNTUzNzZjLTEuMzAyOTUsMi4yMzI0IC0xLjMwMjk1LDQuOTkzNDIgMCw3LjIyNTgyYzEuMzAyOTUsMi4yMzI0IDMuNzA2OTcsMy41OTAzMSA2LjI5MTUzLDMuNTUzNzZoMjkuMjgyNTVsLTQ4LjY4Mjk0LDQ4LjY4Mjk0Yy0xLjg3MjIzLDEuNzk3NTIgLTIuNjI2NDEsNC40NjY3NSAtMS45NzE2OCw2Ljk3ODI1YzAuNjU0NzIsMi41MTE1IDIuNjE2MDUsNC40NzI4MiA1LjEyNzU1LDUuMTI3NTVjMi41MTE1LDAuNjU0NzIgNS4xODA3MywtMC4wOTk0NiA2Ljk3ODI1LC0xLjk3MTY4bDQ4LjY4Mjk0LC00OC42ODI5NHYyOS4yODI1NWMtMC4wMzY1NSwyLjU4NDU2IDEuMzIxMzYsNC45ODg1OCAzLjU1Mzc2LDYuMjkxNTNjMi4yMzI0LDEuMzAyOTUgNC45OTM0MiwxLjMwMjk1IDcuMjI1ODIsMGMyLjIzMjQsLTEuMzAyOTUgMy41OTAzMSwtMy43MDY5NyAzLjU1Mzc2LC02LjI5MTUzdi00NS43MDE1YzAuMjc5ODcsLTIuMDg0IC0wLjM2OTUsLTQuMTg1NzggLTEuNzc2MTQsLTUuNzQ4NzFjLTEuNDA2NjQsLTEuNTYyOTMgLTMuNDI4NjQsLTIuNDI5MzQgLTUuNTMwNSwtMi4zNjk3OHpNNDQuNzkxNjcsMjguNjY2NjdjLTE0Ljc1MzcsMCAtMjYuODc1LDEyLjEyMTMgLTI2Ljg3NSwyNi44NzV2NzEuNjY2NjdjMCwxNC43NTM3IDEyLjEyMTMsMjYuODc1IDI2Ljg3NSwyNi44NzVoNzEuNjY2NjdjMTQuNzUzNywwIDI2Ljg3NSwtMTIuMTIxMyAyNi44NzUsLTI2Ljg3NXYtMzQuMDQxNjdjMC4wMzY1NSwtMi41ODQ1NiAtMS4zMjEzNiwtNC45ODg1OCAtMy41NTM3NiwtNi4yOTE1M2MtMi4yMzI0LC0xLjMwMjk1IC00Ljk5MzQyLC0xLjMwMjk1IC03LjIyNTgyLDBjLTIuMjMyNCwxLjMwMjk1IC0zLjU5MDMxLDMuNzA2OTcgLTMuNTUzNzYsNi4yOTE1M3YzNC4wNDE2N2MwLDYuOTc1NjMgLTUuNTY2MDMsMTIuNTQxNjcgLTEyLjU0MTY3LDEyLjU0MTY3aC03MS42NjY2N2MtNi45NzU2MywwIC0xMi41NDE2NywtNS41NjYwMyAtMTIuNTQxNjcsLTEyLjU0MTY3di03MS42NjY2N2MwLC02Ljk3NTYzIDUuNTY2MDMsLTEyLjU0MTY3IDEyLjU0MTY3LC0xMi41NDE2N2gzNC4wNDE2N2MyLjU4NDU2LDAuMDM2NTUgNC45ODg1OCwtMS4zMjEzNiA2LjI5MTUzLC0zLjU1Mzc2YzEuMzAyOTUsLTIuMjMyNCAxLjMwMjk1LC00Ljk5MzQyIDAsLTcuMjI1ODJjLTEuMzAyOTUsLTIuMjMyNCAtMy43MDY5NywtMy41OTAzMSAtNi4yOTE1MywtMy41NTM3NnoiPjwvcGF0aD48L2c+PC9nPjwvc3ZnPg==') 50% 50% no-repeat;
        background-size: 100%;
    }
</style>

User Experience

Good UX says that interfaces should be predictable, and the best, easiest, and cheapest path to that is not overriding the default behavior in software billions of people use.

The default behavior for links is to open in the same window they were clicked on. Logically speaking then, you should stick to that, and indicate links that open in a new window in an obvious way.

Additionally, opening a link in a new window takes control away from the user. As a user I can always choose to open a same-window link in a new window, but there is no way to override an “open in new window” link.

Measurement Accuracy

If you care about making data-driven decisions (rather than just gaming metrics), opening links in a new window robs you of more accurate statistics for things like bounce rate, exit rate, time on page, session length, and a host of other stats. The specifics vary based on your analytics package. In Google Analytics, it can artificially lower bounce and exit rates (which is why so many people do it), but it makes many engagement metrics less accurate, leading data-driven decisions to be garbage-in, garbage-out.

Efficiency

This is a little thing, but it can add up. In front-end development you have to design and implement an accessible solution, either manually or programmatically, which takes time and testing, not to mention the approvals needed. If you use a custom or customized CMS, that becomes a feature you have to build, train, and maintain. In analysis you need to figure out how it does or doesn’t affect the KPIs you care about. And then you need to factor in all the obnoxious conversations you’ll have with people like me ;-)

If you could just avoid all that hassle, why wouldn’t you?

Wrap Up

Practically, I do not think opening links in new windows is going away. It’s an anti-pattern that has persisted from the beginning of the web and it will live on.

What I do hope is that you will:

  • examine your rationale
  • check your metrics and goals
  • add indicators and labels as a requirement in your website design and development

If you want to talk more about this, just send me a message.

===

Here are a few resources if you’d like to read more about this topic: