Description

This technique will append markup to links which are found to open new windows, notifying the user that a new window will be opened.

Accessibility Challenges

Opening new windows can be confusing to users. In some cases, they may not be aware that a new window has opened. In other cases, the new window may disorient the user. Explicitly indicating that a new window will be opened can help alleviate this problem. It bears mentioning that not opening the new window at all would be the best approach.

Applicable Best Practices

Ensure links which open new windows declare they will do so.

Bad Example(s)

The basic new window link:

Linky Dinky
<a href="/path/to/page.html" target="_blank">Linky Dinky</a>

Good Example(s)

New window icon, complete with declarative alt text, appended to the link

Linky Dinky

<!--jQuery Snippet-->
$('a[target="_blank"]').append('<img src="images/open_in_new_window.png" alt=" Opens in a new window ">');
<!--Link being selected for modification--> <a href="/path/to/page.html" target="_blank">Linky Dinky</a>

or (less ideal),

Declarative text placed in hidden span. This approach is only beneficial to users of screen readers though others would benefit from the 'new window' notice.

Linky Dinky

<!--jQuery Snippet-->
$('a[target="_blank"]').append('<span class="offscreen"> Opens in a new window </span>');

<!--CSS declaration-->
.offscreen{
position:absolute;
left: -10000px;
} <!--Link being selected for modification--> <a href="/path/to/page.html" target="_blank">Linky Dinky</a>

Small compromise

Declarative text placed in hidden span. This approach will 'show' the new window notice when the link receives focus and hide it when focus is taken away.

Linky Dinky

<!--jQuery Snippet-->
$('a[target="_blank"]').append('<span class="offscreen"> Opens in a new window </span>');

$('a[target="_blank"]').focus(function(){
$('span', this).removeClass('offscreen');
});

$('a[target="_blank"]').blur(function(){
$('span', this).addClass('offscreen');
}); <!--CSS declaration--> .offscreen{
position:absolute;
left: -10000px;
} <!--Link being selected for modification--> <a href="/path/to/page.html" target="_blank">Linky Dinky</a>

Testing

  1. Check for the existence of links which open new windows
  2. Check that each link declares that it will open a new window.
    1. Ensure the new window declaration is within the <a> tag