DQM and Experience Optimization
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

DQM Checkpoints and Standards

Checkpoints - 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:

              <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.

What topics do this checkpoint affect?

  • Accessibility (WCAG 2 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.

References

Labels (1)