W3C home > Mailing lists > Public > public-wcag2-techs@w3.org > November 2004

Client Side Techniques (Techniques XML Submission Form)

From: nobody <nobody@web3.w3.org>
Date: Mon, 22 Nov 2004 16:03:02 +0000 (GMT)
To: public-wcag2-techs@w3.org
Message-Id: <20041122160302.B202936D0B@web3.w3.org>

 checkbox checked

Submission Results:

Technology: Client Side Techniques 
Techniques Category: Script techniques 
Submitter's Name: Samuel Rinnetmäki 
Submitter's Email: samuel@iki.fi

<technique id="UNKNOWN">
<short-name>Popup links with minimal script  within markup</short-name>
 <guideline idref="" />
 <success-criterion idref="UNKNOWN" />


<p>Scripting is separated from markup in popup window links</p>

Builds upon example http://www.w3.org/TR/2004/WD-WCAG20-SCRIPT-TECHS-20041119/#js-uri

This technique is trying to separate structure (markup) and behaviour (script) from each other.  Links that should open in a new window, are not marked with target attribute and don't have onclick event handler.  They do, however, have  class value 'popup'.

A script function will go trough all links and attach an onclick handler to all links with class="popup".  The script could easily be modified to select only e.g. the links with absolute URIs.  Or, one could still keep the target attributes but enhance the 


 <affects group="UNKNOWN" />

Two files: popup.js and test.html.  The JavaScript file popup.js contains most of the functionality, test.html is just a simple HTML page which includes the popup.js script and contains a single link with class="popup".




var options = 'height=400,width=400,scrollbars=yes,resizable=yes';

function openNewWindow(href, target, options) {

  var w = window.open(href, target, options);

  if (w.focus) {



  return (w ? false : true);


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

function addOnClickHandlers() {

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

    if (links[i].className == 'popup') {

      var href = links[i].href;

      var target = 'myPopUpWindowName';

      var func = function() { return openNewWindow(href, target, options);};

      links[i].onclick = func;




window.onload = addOnClickHandlers;


test.html (or any other name you prefer):



<title>Popup link proof of concept</title>

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


<a href="register.php" class="popup">register here</a>





<see-also><br />&lt;p>
 <loc href="http://www.w3.org/TR/2004/WD-WCAG20-SCRIPT-TECHS-20041119/#js-uri" >javascript: URIs </loc>
</p><br /></see-also>

Additional Notes:

The example contains some fixed strings like the 'popup' class name, 'myPopUpWindowName' target window name and the options for the new window.  You may want to change these or choose a different approach altogether.
Received on Monday, 22 November 2004 16:03:03 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 6 January 2015 19:45:19 UTC