Accessible Popup Links
Background
Before I explain how to implement this code, let me first state that the inspiration for this code came from an article written by Caio Chassot at A List Apart in which he described a JavaScript library he had created which may be used to create Accessible Popup Links. I am not a JavaScript programmer so I struggled to make sense of it. My immediate reaction was that it was extremely easy to implement and accomodated JavaScript-enabled, JavaScript-disabled and JavaScript-incapable browsers. Although I could not test it, I presume that because the code is based on DOM-oriented JavaScript methods, older browsers would not be able to run it putting them in the JavaScript-incapable class of browsers.
However, Checkpoint 10.1 of WCAG 1.0 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 more lenient interpretation of this checkpoint is to allow spawned windows, pop-ups and changing windows but only if the user is informed. In the discussions I had with Caio about this, I didn't feel I was getting anywhere with my suggestion that the user must be informed in order for his code to meet the lenient interpretation of Checkpoint 10.1. I tried to make some modifications on my own but I certainly agree that my efforts to modify or add on to his code were rudimentary at best (dangerous at worst). I took my ideas to the DOM group at SitePoint Forums where it was picked up by Adios and he ran with it.
At the moment, Adios' code works perfectly in IE6 and Firefox (Windows) but is problematic in Opera. He has added some additional features to the functionality which are excellent.
- The developer has the option of adding a popup warning within the title attribute or in spanned text adjacent to the link.
- The developer has the option of individually customizing the size, position, chrome, title and adjacent spanned text for each popup link.
- The developer may create a default popup style that applies to all popup links.
- The adjacent spanned text may be styled using standard CSS.
- The style of the adjacent spanned text may be individually customized using a.classname+span.classname which is a selector that is not supported by IE but can be seen in Opera and Mozilla-based browsers.
- Although individually customized popups take a lot of effort, creating and implementing a default popup profile is very simple.
I personally feel that if you are inclined to interpret Checkpoint 10.1 in the more lenient fashion, this code may be useful to you.
Examples
Here is a standard link to one of my favourite resource sites, A List Apart.
This link to PHP.net opens the link in a popup window that has been centered in the browser window.
This link to Apache.org also generates a popup window but it alerts the reader with the title text set to "Link opens in new window". This popup appears in the top left corner of the browser window.
This link to Google generates a popup window which is smaller, appears in the top right corner and Adios' JavaScript code adds the popup alert text right beside the link rather than in the title text. You will notice that the adjacent spanned text can be styled using standard CSS.
This link to Altavista generates a popup window and uses both title text and adjacent spanned text. Additionally, a customized style has been applied to the adjacent spanned text using the a#idname+span.classname selector which is not supported by IE but is supported by Opera and Mozilla-based browsers: the adjacent spanned text uses a serif font whereas the Google example above uses the default sans-serif font.
As you can see, each popup can be customized or you can just create a default popup style such as these links to Opera.com, Mozilla.org and AnyBrowser.com and the home page of this web site.