The link should have a warning before automatically opening a new window or tab
Description
Rule ID: links-new-window-mark
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 if 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 thebackbutton 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; }
Resources
- G201: Giving users advanced warning when opening a new window.
- H83: Using the target attribute to open a new window on user request and indicating this in link text.
- SCR24: Using progressive enhancement to open new windows on user request.
Standard
Accessibility, SiteLint, WCAG 2.1, Success Criteria 3.2.5, Level AAA