robert hahn

a darn good web developer

November 23, 2005

Using window.open() in an Accessible Way

From the things-I-should-have-done-years-ago dept. comes a nugget of knowledge I think everyone designing sites should pick up right now and start using.

If you have a link designed to open a new window with content in it, and the window needed to be styled somehow (therefore requiring a JavaScript window.open() call), then don’t set up your link like the following:

<a href="#" onclick="window.open('foo.html',,'width=400,height=400');">
    Open this window
</a>

<a href="javascript:window.open('foo.html',,'width=400,height=400');">
    Open this window
</a>

In both cases, if the user’s JavaScript is turned off, or isn’t available (like, for example, cellphone browsers), then there’s no way for them to access that content. Consider instead using the following method:

<a href="foo.html" onclick="window.open(this.href,,'width=400,height=400');return false;">
    Open this window
</a>

That way, if someone clicks the link, and they have JavaScript enabled, they’ll get the intended result. The return false; ensures that the link isn’t actually followed in the parent window. Most of your audience will fall in this category. And as a bonus the JavaScript-disabled audience will now be able to access that content.