Web Accessibility: Anchor tags for Popup windows

Many a times, on your page, you need to have a JavaScript pop-up window for Slideshow, gallery, comment form, etc. But you also want to have your site WAI compatible. What do you do ?

The idea is to pop-up windows in Browsers that support JavaScript and provide actual href value to the Anchor tag a. But also provide an onclick event that pops up the window.

Consider I want to have a slideshow on a particular link, which actually should pop a 500 x 400 window keeping WAI in its place. This is the code that helps me solve the problem.

Code

...
<script type="text/javascript">
function popW(url) {
  window.open(url, 'newPop', 'width=500,height:400, directories=0');
}
</script>
...
<a href="/slide-show.html" onclick="popW('/slide-show.html');return false;">Slideshow</a>
..

Let us understand it..

  • The Slideshow page is spearate document/page
  • The anchor’ href attribute specifies the correct link to the page
  • The onclick handler pops the window, in browsers with JavaScript enabled
  • Notice return false; after the function call in onclick. This prevents JavaScript enabled browsers to load the href link on the current page

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.