Making Pop-up Windows Accessible

Accessible scripting index | tom.me.uk home

Ah, popups. Good old window.open. When abused, the most annoying thing ever - don't you just love those onunload popups? But they can sometimes be quite handy, when used appropriately.

The Problem

There are a few common ways to open a new window, and all involve wrongly using the A Element. The A element creates a hypertext link, primarily used to navigate between pages (they can also be used to send e-mails with mailto, and a few other things). But often developers incorrectly use them just to trigger script events, either using...

<a href="javascript:void(open('mypage.html', 'windowName', '...'));">Link text</a>

...or...

<a href="#" onclick="window.open('mypage.html', 'windowName', '...');">Link text</a>

Neither of which provide the actual page URL for the HREF property ("#" is often used as a "do nothing" link, if executed it will actually jump to the top of the current page) - and they should - always. If a browser with no scripting comes along and tries to execute one of these links, nothing at all will happen. One broken site. One confused user.

The Solution

Very simple - always make sure the HREF property has a valid web address. This does not, however, mean you have to abandon the popup window...

<a href="popupPage.html" target="windowName" onclick="return!open(this.href, this.target, '...')">Link text</a>

This will open a nice, shiny window with whatever fancy options you wish to set for browsers with scripting - but will also open the link when scripting is disabled - perfect.

It also brings benefits for users with scripting - right-clicking on the link and copying the address or adding it to favorites will work, whereas these would have done nothing with the links without valid URLs.

What happens here is that when the link is activated, the onclick event is triggered - opening a new window with the link's target and href. It then returns false, which means the actual link does not execute. Without scripting, the onclick is just ignored and the link continues as normal.

For more information about the open method (how to size and place the window on the screen), see open Method on MSDN.

Refer to this...

Another tip from Thor Larholm is using something along the lines of...

<a href="popupPage.html" target="windowName" onclick="window.open('', this.target, '...');">Link text</a>

Slightly more complicated, but this passes on a valid HTTP_REFERER header to the popup window page.

Back to Contents - Articles Copyright © Tom Gilder 2002