Opening links in a new window

Links that opened in a new window have always been a sticky point when it comes to accessibility; ever since the Web Content Accessibility Guidelines (WCAG) 1.0 were released way back in 1999. These guidelines made it clear that pop-up windows should be avoided whenever possible^{Footnote 1}.

Since then technology has moved on and most users have become more accustomed to browser behaviour, such as spawning windows. User agents have also progressed over the years; some assistive technology will alert the user when a link opens in a new window (but only after the link has been clicked). This steady education of users and technological improvements could explain why the techniques for addressing pop-up windows were moved to Level-AAA success criteria for WCAG 2.0^{Footnote 2} in 2008.

Despite the “downgrading” of the guideline under WCAG, the issue affecting users still remains. Disorientation and confusion can be caused by links that spawn a new window; particularly if the user has not been informed beforehand. This is why the general point-of-view is still to avoid opening new windows whenever possible.

However, there are occasions when opening a new window or tab cannot be avoided. If this is the case, we can avoid confusing or disorientating the users by providing a textual indicator.

Textual indicators

Ideally we should aim to inform the user of any non-standard behaviour, thus preventing any confusion.

Latest news (Opens in new window)

Alternatively, you may be limited by the visual space available for the link text, in which case you could position the text off-screen and provide a small visual icon:

Latest news (Opens in new window)

.hide {
    text-indent: -999em;
    background: url(new-window_10x10.gif) no-repeat 100% 50%;
    display: inline-block;
    padding-left: 10px;
    ... }

There we have it! A simple way to inform users of a link that opens in new window. Simple, but there are some things to keep in mind:

• Avoid using the title attribute alone to alert users. This attribute is not always supported by assistive technology or enabled by the user. So whilst it might be handy for mouse users hovering over the link, it could pass unnoticed by a screen reader user.
• Avoid using the CSS :before or :after pseudo styling. These are style attributes and unlikely to be noticed by visually impaired users.
• Don’t use “display: none;” to hide text. This styling will hide it visually as well as from those using screen readers.
• Keep your new window icon consistent. Using a different icon for the same functionality would get confusing so keep it consistent when opening a new window.

1. http://www.w3.org/TR/WCAG10/#gl-interim-accessibility
2. http://www.w3.org/TR/WCAG20-TECHS/H83.html