External Links and new windows

Paul Boag

Not long ago I shared some advice on handling links within your web pages. Today I want to cover linking to external sites. However, be warned, this is not a normal boagworld.com post… it contains code!

27/07/06: I have finally got around to updating the code below to reflect feedback I have received via the comments. Thanks to everybody who has contributed.

What to do with links to third party sites has always an area of debate. The accessibility purists argue that the practice of opening new windows when linking to external sites is evil and that if users wish to, they can do so themselves. However, if you have ever sat in on a usability session you quickly learn that simple things like launching a link in a new window is beyond many users. Furthermore, with so many bad sites around you cannot always rely on the back button to return the user to your site. Of course, at the end of the day these kinds of debates are redundant because if the client demands it, you will have little choice in the matter.

The golden rules of new windows

Whether you like it or not sooner or later you will have to open external sites in a new window. The trick is to ensure that this link doesn’t make your site break WAI guidelines on accessibility or invalidate your code.

Accessibility

The first problem relating to accessibility is relatively easy to solve. 10.1">The guideline in question states:

Until user agents allow users to turn off spawned windows, do not cause pop-ups or other windows to appear and do not change the current window without informing the user.

The trick to complying with this checkpoint is to "clearly inform" the user that a new window is going to open. I recommend doing this in two ways. Firstly, assign the link a title tag telling the user the new window will open. Secondly, because you cannot rely on the user hovering over a link before clicking, add an icon after the link showing them something different is going to happen.

Validation

The issue of validation is a bit trickier. Normally to launch a link in a new window you use the target attribute. Unfortunately, this attribute is on the way out and will more than likely invalidate your document. Ensuring that your HTML is valid now and in the future is good practice for numerous reasons that I won’t go into here (if you want to know more about validation read my post on the subject). Sufficed to say that using the target attribute is not the answer.

Flexibility

What if your client changes his/ her mind in the future? Do you really want to be going through potentially thousands of pages altering all of the links? What you need is a solution that manages all of these links centrally so that by changing a few lines of code you can change the behaviour of all of them at once.

A neat little solution

If Jeremy Keith has taught me anything, it is that DOM scripting is great for this kind of stuff. In three easy steps, you can create external links that open in a new window while still being accessibility, valid, and flexible. Here is how:

Step 1: Semantic code

Remember we might want to change our minds about spawning a new browser window later so no target attributes or title tags talking about opening new windows. Each link to an external site will simply read as follows:

<a href="http://www.headscape.co.uk" class="">Best web design company ever!</a>

All I have done is say this links to another website with the class="", other than that it’s an ordinary link.

Step 2: Apply the JavaScript

The JavaScript function below does the following:

  1. Looks at all of the a tags on a page searching for those labelled ""
  2. Changes the class of those tags to "newWinStyle" (I’ll explain why later)
  3. Adds "(new window)" to the end of the title tag so users know it is going to spawn a new window
  4. Attaches an "onlick" event to those links so that when they are clicked it opens in a new window.

// Opens a link in a new window when class =
function doPopups() {
if (!document.getElementsByTagName) return false;
var links = document.getElementsByTagName("a");
for (var i=0; i < links.length; i++) {
if (links[i].className.match("")) {
links[i].className = links[i].className + " newWinStyle";
if (links[i].title == "") {
links[i].title = "(new window)";
}
else {
links[i].title = links[i].title + " (new window)";
}
links[i].onclick = function(e) {
if(!e)e=window.event;
if(e.shiftKey || e.ctrlKey || e.altKey) return;
window.open(this.href);
return false;
}
}
}
}

If JavaScript is disabled the link still works but opens in the same window. That is why the title tag is applied in JavaScript. If the "new window" message was added in the html it would cause confusion if JavaScript is disabled and the window spawning didn’t happen.

Step 3: The CSS

In your CSS file, you can now create a new style for "newWinStyle" and make external links look however you want. The reason you do not style "" directly is for the same reason mentioned above. You don’t want a new window icon appearing if Javascript isn’t enabled and the link wont spawn a window.

Added bonuses

This simple little approach has some great added bonuses too. Firstly, the content providers who create the links in the first place don’t need to add title tags or set the destination window for the link. Secondly, it would be easy to create an additional bit of JavaScript that allows the user to enable or disable window spawning. This gives the control back to the user where it belongs.

So what do you think? Have I missed something? Can this approach be improved? Do you believe you should never spawn a window?

Boagworks

Boagworld