Accessible standard compliant pop up windows??

A lot of people these days will tell you pop ups are evil. Of course, there are many different types of pop ups, some of them more evil than others. Pop ups that spawn on the closing of a window, or the loading of a page for example are utterly evil - for example when you're on a page with nekkid ladies and you close the page quickly, trying to hide the evidence, only to find 200 windows popping up all over your desktop with unimaginable sexual deviancy depicted in every one: who in their right mind will argue the case for those kinds of pop ups?

And it's not just pop ups we're talking about really, it's opening new windows. For example when people link to other sites they often open the links in a new window thinking that it keeps the visitor on their site. But Jakob Neilsen points out that:

'the strategy is self-defeating since it disables the Back button which is the normal way users return to previous sites. Users often don't notice that a new window has opened, especially if they are using a small monitor where the windows are maximized to fill up the screen. So a user who tries to return to the origin will be confused by a grayed out Back button. '

Since my father started computing I can tell you first hand that this is true. But are pop ups a necessary evil?

I have come to believe that we need to keep the web as simple as possible. This means making an attempt to have things behave the way users come to expect them to behave. Links should open in the same browser window. If someone wants to open the link in a new window they should right click, or on a mac press that maccy button that does the same thing. 'But they don't know how to do that...' I hear you cry. Well let them learn. Teach them. If you believe they don't know how to do that then tell them. On your page. Besides, if they don't know how to do that, what are the chances they will know what the hell is going on when they can't use the back button to get back to your site?

And then on the other hand I found myself deliberating over an issue on the Fota site and couldn't see a better solution than pop ups. After a lot of research and a lot of deliberating I decided pop ups, if used correctly and carefully, didn't have to be evil. If you could have a pop up that would allow for browsing without javascript and didn't break the right click and conformed to web standards and you notified the user that the link would open in a new window and you implemented it with extreme caution, I felt that would be ok.

I wanted to have pages with small images on them, with the option of enlarging the images. I had wondered about putting straight links to the images and creating a page for every image. Creating a page per image seemed like overkill and straight links meant the user would be clicking back and forth a lot. I felt the images were back up material, users would probably want to view them in reference to the textual content on the page and I wanted to make that as easy as possible.

The first thing I considered was using the target attribute of the a tag to open a new window, however HTML 4.0 Strict and XHTML 1.0 Strict no longer include the target attribute of the <a> tag which means that according to W3C recommendations you can't open a new window from a link using html alone and my site was XHTML 1.0 Strict. If you wish to open a new window, while conforming to either of those standards, you need to introduce javascript. This article on sitepoint.com talks you through opening new windows while trying to conform to those standards.

However, I found that this solution didn't really work for me because using target="_blank" opened a window that would very possibly obscure the original window completely. I myself browse with the browser maximised so when I open a new browser instance it is set to open maximised and obscures other windows. I didn't want this to happen because of the confusion it could create for users who would not realise a new window had opened. I wanted more control over the window I was opening so I could open a smaller window which would pop up very obviously over the original window.

Now I have done this often in the past using scripts found on the web or scripts inherent in WYSIWYG's such as Dreamweaver. However all of the scripts I had used previously were pretty nasty. They were nasty because they don't work for people who are not browsing with javascript functionality and they do not work for people, like me, who often right click and open in new window or new tab. I like to browse with Firefox and use tabbed browsing to open relevant links - recently pop up scripts had been really annoying me as they make it impossible to choose how you want to open the link. The reason is that they often have a null link or a piece of javascript in the href itself. I really didn't want to implement a solution that I personally found really annoying when browsing so I wondered if there was a better option.

I seemed to remember seeing an article on accessible pop ups on A List Apart, so I started there. However I found the solution to be over complex. My javascript skills are non-existent to basic and anyway I felt there must be a simpler, cleaner solution. I list this article here because it talks through some of the issues with pop ups very coherently and the discussion on the article is also interesting from a research point of view.

Eventually I found an article on quirksmode that I really liked - it seemed like a nice clean and simple solution to my problem. I use the solution from that article, with a change suggested by Jon Hanna , which was to use class instead of type in the a tag. In the original article the type attribute is used with a custom value - I was a little confused about the author's comments on XHTML compliance so I sought help. Jon pointed out that rel, rev or class could also be used and would all probably be better options if going for XHTML compliance as they can have custom values. I opted for class as I felt that while using this method is still essentially a misuse of the attribute, of all the options it is the least objectionable. The code had to be altered slightly, and Jon was kind enough to provide the alterations. Without changing getAttribute('class') to className the solution didn't work in Internet Exporer for some reason.

function popupcode() 

{

var x = document.getElementsByTagName('a');

for (var i=0;i< x.length;i++)

	{

	if (x[i].className == 'popup1')

		{

		x[i].onclick = function () {

			return popup1(this.href)

			}

		x[i].title += ' (Popup1)';

		}

	}

}



window.onload = popupcode;





function popup1(url)

{

newwindow=window.open(url,'name','height=450,

width=450, resizable=yes, scrollbars=yes, status=yes');

if (window.focus) {newwindow.focus()}

return false;

}

My links then look like this:
<a href="mypicture.jpg" class="popup1">link text</a>

I am very happy with this solution, I have the javascript in an external file, referenced in each page that needs the pop up code

<script type="text/javascript" src="scripts.js">
</script>

and all I have to do to have a link open in a pop up is include in the a tag the class='popup1'. Lovely.
On top of that it still works if you don't have javascript, and works for right clicking and tabbed browsing and because it also names the window it focuses correctly and won't result in loads and loads of pop up windows.

The last piece of the puzzle for me was to let the user know that the links would open in a new window. I originally had text saying 'Click to enlarge in a new window' but I realised that if you were browsing without javascript this wasn't actually true, so I used javascript to write the part about the new window.
Click to enlarge<script type="text/javascript"><!--
document.write(' in new window');
//-->< /script>
That way those browsing without javascript simply see 'Click to enlarge', and others see 'Click to enlarge in a new window'.

One last thing to note is that according to the sitepoint article window.open() sometimes results in the referring window not being properly reported. Since all my links are within the same site it doesn't really bother me, but if you were opening other external sites that would probably be an issue.

Many thanks to Jon Hanna without whom I might never have got this solution to a point I was completely happy with it.