links-new-window-mark

Description

This rule determines if a given anchor element <a> have defined the attribute target="_blank" and it raises the informative message to add an indicator that the link destination will open in a new window or tab.

Quote from W3C:

Opening new windows automatically when a link is activated can be disorienting for people who have difficulty perceiving visual content, and for some people with cognitive disabilities, if they are not warned in advance. Providing a warning allows the user to decide it they want to leave the current window, and the warning will help them find their way back, if they do decide they would like to go to the new window. It will help them understand that the back button will not work and that they have to return to the last window they had open, in order to find their previous location.

How to fix it

Following techniques can be used to mark a link that opens in a new window or tab:

Technique 1

a[target^="_"]::after {
  content: " (opens in new window/tab)";
}

Technique 2

<a href="https://example.com" target="_blank" rel="noopener">
  example link
  <span class="visually-hidden">(opens in new window/tab)</span>
</a>

Note 1: that rel="noopener" isn’t strictly accessibility related, but important enough to mention. The noopener keyword for the rel attribute of the <a>, <area>, and <form> elements instructs the browser to navigate to the target resource without granting the new browsing context access to the document that opened it.

Note 2: .visually-hidden class is a utility class aiming at visually hiding the element while keeping it accessible to assistive technologies such as screen readers.

Technique 3

<div hidden>
<span id="opens-in-new-window">Opens in a new window.</span>
<span id="opens-an-external-site">Opens an external site.</span>
<span id="opens-an-external-site-in-new-window">Opens an external site in a new window.</span>
</div>

With technique 3 you can use aria-describedby and refer to phrases that describe the action on the element on which the attribute is set. Example: <a href="example.com" aria-describedby="opens-an-external-site-in-new-window" target="_blank" rel="external noopener">Example</a>.

The visual indicator is still required for Technique 2 and 3. Example:

a {
  position: relative;
}

a[target=_blank]::after {
  background-color: #00101f;
  border-radius: 3px;
  color: #fff;
  content: "\2197";
  display: inline-block;
  font-size: small;
  line-height: 1rem;
  margin-left: 0.125rem;
  padding: 0.05rem 0.15rem;
  position: absolute;
}

When the referenced document is not part of the current site we recommend adding the attribute rel="external".

Resources

Standard

Accessibility, SiteLint, WCAG 2.1, Success Criteria 3.2.5, Level AAA