Crownpeak (Retired)

Indicate when a link will open in a new window/tab

Why is this important?

Users who are not familiar with web technologies such as the elderly as well as those with certain disabilities use their browsers default tools such as the back button to navigate back to areas they are familiar with. If a page opens on a new window users would not be able to use this option.  It is important to warn a user that a page will "Open in a new window" prior to them accessing the page. 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. 

How can I resolve this issue?

A technique recommended by WCAG is to add the text (opens in a new window) within or right after the link text

Example 1:

<a href="knitting.html" target="_blank">All about Knitting 
                (opens in a new window)</a>

What if it is difficult to add such a long text because of the design of the website?

There are cases where the text would be difficult to implement on a website due to its design. In these cases it is recommended to use CSS to hide the text visually but still show the text on hover or though other tools

Example 2:

                <title>Pop-Up Warning</title>
                <style type="text/css">
                body {
                :focus { outline: 0; }
      ,, {
       span {
                position: absolute;
                left: -9000px;
                width: 0;
                overflow: hidden;
       span, span, span {
                top:1em; left:1em; width:12em;
                border:1px solid #0cf;
                text-align: center
                div.example {
                margin-left: 5em;
                <h1>Pop-Up Warning</h1>
                <p> This is an example of an <a class="info"
                href="popup_advisory_technique.html" target="_blank">
                <strong>External link</strong><span>Opens a new

Can I use Javascript or aria labels instead?

This method is not accessible across all technologies, so we would not advise on using this technique to improve accessibility. While using Javascript and aria labels may work for most users and screen readers, due to the different ways to implement this, not all screen readers may read out the text properly. Since there is a way to implement the code using standard html and css it is recommended to use this approach instead.

What topics do this checkpoint affect?

  • Accessibility (WCAG 2.1 Level A, 3.2.1)

Can you explain how this checkpoint works?

This checkpoint examines the entire HTML source code of a page and reports if the text between or immediately after the <a> element does not contain keywords such as "opens, new, window, tab". The keywords should be clear to the user so the checkpoint will look for whole words and not abbreviations or icons. For any guidance on your specific setup, please contact your Customer Success Manager.


Labels (1)

Can't find what you are looking for?

Find Answers

Search our DQM Forum to find answers to questions asked by other DQM users.

Ask a Question

No luck? Ask a question. Our Product and Support teams are monitoring the Forum and typically respond within 48 hours.

Ask a Question