Don't Open New Windows (target="_blank")

[Webnauts]

Actually you should not force links to open in a new window or popups (such as with the "target" attribute or with JavaScript).

Changing the current window or popping up new windows can be very disorienting to users who cannot see that this has happened.

As you might also know, JavaScript is not supported by all browsers and some users disable it. When JavaScript is used, it should not be relied upon.

Another fact is, that if you markup with XHTML Strict, the "target=_blank" is not supported!

If you absolutely must open a link in a new window, explicitly warn the user with a clear indication that the page will open in a different window. Provide a title attribute on the anchor tag with a description indicating that the link opens a new window; for example:

<a href="http://www.eypd2003.org" target="_blank" title="Link opens in new window.">European Year of People with Disabilities 2003 (new window)</a>

If you want to build an accessible pop-up window, add the code below within the head tags of your HTML document:


<script type="text/javascript">
var newWindow = null;

function closeWin(){
if (newWindow != null){
if(!newWindow.closed)
newWindow.close();
}
}

function popUpWin(url, type, strWidth, strHeight){

closeWin();

if (type == "fullScreen"){

strWidth = screen.availWidth - 10;
strHeight = screen.availHeight - 160;
}

var tools="";
if (type == "standard" || type == "fullScreen") tools = "resizable,toolbar=yes,location=yes,scrollbars=yes ,menubar=yes,width="+strWidth+",height="+strHeight +",top=0,left=0";
if (type == "console") tools = "resizable,toolbar=no,location=no,scrollbars=no,wi dth="+strWidth+",height="+strHeight+",left=0,top=0 ";
newWindow = window.open(url, 'newWin', tools);
newWindow.focus();
}
</script>

Above script source: http://www.accessify.com

Then add your link in the body of your document as below:

<a href="http://www.w3.org/WAI/" onclick="popUpWin(this.href,'standard',640,480);re turn false;" onkeypress="popUpWin(this.href,'standard',640,480) ;return false;" title="Link open's in a new window">Web Accessibility Initiative (WAI)</a>

Example see here: http://www.webnauts.net/popup.html

Test this turning off JavaScript to see how it works!


Further reading:

Not opening new windows: http://diveintoaccessibility.org/day...w_windows.html
Use interim solutions: http://www.w3.org/TR/WCAG10/#gl-interim-accessibility
Opening a link in a new window: http://lists.w3.org/Archives/Public/...2Apr/0100.html

If you still have questions, please feel free to post them.

[tthurgo]

What exactly is the difference between a regular Javascript which opens a new window, and your approach? Can you explain that to me?

Tom

[Webnauts]

This is an accessibility issue.

If you markup with XHTML Strict, the "target=_blank" is not valid.

So in this case, if you want to open new windows, your code would validate this way.

As you might also know, JavaScript is not supported by all browsers and some users disable it.

There is a statistic at w3schools.com, which says that 13% of users disable JavaScript.

Therefore, when JavaScript is used, it should not be relied upon.

[Webnauts]

Thank for comments.

I updated the above tutorial!

[tfk]

Very cool tutorial. Good job.

[liqweed]

Also worth mentioning: New-Window Links in a Standards-Compliant World - another good tutorial that advocates the use the 'rel' attribute for this very purpose using javascript.

In short,

<a href="document.html" target="_blank">external link</a>

becomes:

<a href="document.html" rel="external">external link</a>

plus some javascript in the background. Very clean, very simple.

[Webnauts]

Tutorial revised! Please have a look here: Don't open new windows (revised tutorial)