Digital Quality Management
cancel
Showing results for 
Search instead for 
Did you mean: 

DQM Checkpoints and Standards

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

Why do I need to inform users that a link will open in a new window?

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 warn users that a link will open in a new window?

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:

              <html>
                <head>
                <title>Pop-Up Warning</title>
                <style type="text/css">
                body {
                margin-left:2em;
                margin-right:2em;
                }
                :focus { outline: 0; }
                a.info {
                position:relative;
                z-index:24;
                background-color:#ccc;
                color:#000;
                text-decoration:none
                }
                a.info:hover, a.info:focus, a.info:active {
                z-index:25;
                background-color:#ff0
                }
                a.info span {
                position: absolute;
                left: -9000px;
                width: 0;
                overflow: hidden;
                }
                a.info:hover span, a.info:focus span, a.info:active span {
                display:block;
                position:absolute;
                top:1em; left:1em; width:12em;
                border:1px solid #0cf;
                background-color:#cff;
                color:#000;
                text-align: center
                }
                div.example {
                margin-left: 5em;
                }
                </style>
                </head>
                <body>
                <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
                window</span></a>
                </p>
                </body>
                </html>
            

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.

Affects: Accessibility (WCAG 2 Level A, 3.2.1)
Technical Details: 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.
References:

Understanding SC 3.2.1
G201: Giving users advanced warning when opening a new window
F52: Failure of Success Criterion 3.2.1 and 3.2.5 due to opening a new window as soon as a new page ...

Labels (1)
Version history
Revision #:
5 of 5
Last update:
‎07-16-2019 03:56 AM
Updated by:
 
Looking for more?
Ask in Discussions
Developers

Peer-to-peer support  and answers on developing CMS templates, modifying privacy scripts or building integrations.

Digital Experience Management

Find answers and ask questions on content management, personalization and targeting.

Digital Quality Management

Find answers and ask questions on WCAG and SEO quality management.

Digital Governance

Find answers and ask questions on consent and monitoring solutions.