How To

  Homes arrow How To arrow A More Accessible Pop-Up Window
 Webmaster Tools
Base64 Encoding 
Browser Settings 
CSS Coder 
CSS Navigation Menu 
Datetime Converter 
DHTML Tooltip 
Dig Utility 
DNS Utility 
Dropdown Menu 
Fetch Content 
Fetch Header 
Floating Layer 
htaccess Generator 
HTML Encoder 
HTML Entities 
IP Convert 
Meta Tags 
Password Encryption
Password Strength
Pattern Extractor 
Ping Utility 
Pop-Up Window 
Regex Extractor 
Regex Match 
Scrollbar Color 
Source Viewer 
Syntax Highlighting 
URL Encoding 
Web Safe Colors 
Forums Sitemap 
Weekly Newsletter
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Contact Us 
Site Map 
Privacy Policy 
  >>> SIGN UP!  
  Lost Password? 

A More Accessible Pop-Up Window
By: Developer Shed
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating:  stars stars stars stars stars / 0

    Table of Contents:

    Rate this Article: Poor Best 
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article




    A More Accessible Pop-Up Window
    by Karl Groves

    More and more commercial websites are featuring pop-ups these days. In many instances, I'm noticing more pop-ups being used for advertising, probably due to the harsh reality that is "banner blindness". In other cases, pop-ups are used to display supplemental content to the parent page. Unfortunately, many designers know little about how to make a proper pop-up window that will be accessible.

    Among the many concerns of accessible design is found in "Guideline 6" of the W3C's Web Content Accessibility Guidelines: - "Ensure that pages are accessible even when newer technologies are not supported or are turned off." Simply put, you should ensure that your content remains accessible to those who modify their accessibility settings to disable scripting or whose choice of adaptive technology does not recognize scripting. See also the relevant Section 508 criteria:

    Popups are among the items that most often violate this accessibility guideline

    A common pop-up window link will probably begin like this: <a href="#" onClick=" or: <a href="javascript:; onclick=" In both instances, the link becomes completely unusable to those with scripts turned off or with browsers that do not recognize JavaScript.

    From here on out, lets assume our target audience fits one of the two situations just mentioned - either they have JavaScript disabled or their browser cannot recognize JavaScript.

    In the first case, using "#" as the hypertext reference will result, at best, in their being taken to the top of the page. The "#" sign is interpreted as what's known as a "Fragment Identifier Separator" ( see geekspeak at - ). What this means to us is that the "#" is supposed to point somewhere, such as a named object on the page. It is not a default "Do Nothing" character. The hash symbol prepends the name of the target. So that <a href="#contact">Contact me</a> will take you to a place on the page that is named "contact" - <a name="contact"></a>

    Using just plain "#" as the hypertext reference is bad because "A void fragment-id with or without the hash sign means that the URL refers to the whole object." In most browsers, it will be interpreted as pointing back to the beginning of the page. At best, it will do nothing when clicked.

    In the second case, using "javascript:;" as the hypertext reference simply does nothing. Remember, we're dealing with those who for one reason or the other can't use anything dependent upon JavaScript. So again, this link does nothing for someone whose browser does not recognize javascript.

    It can be done better and work well for all

    Fortunately, we can create an accessible alternative that functions perfectly for those with JavaScript enabled, yet degrades well for those who don't. We do this by using a real link to the actual destination in our hypertext reference:

    <a href="file.html" onclick="'file.html', 'window_name', 'toolbar=yes, location=yes, status=yes, menubar=yes, scrollbars=yes, resizable=yes, width=xxx, height=xxx'); return false"> Open Window </a>

    The above is the "accessible" method to open a popup (opening new windows is bad anyway, so I guess this is the lesser of two evils). Using the real file as the hypertext reference, but set the link to "return false" will operate properly whether the person has JavaScript enabled or not. Those without JavaScript enabled still get to the content, and those who have JavaScript get the popup as intended.

    Now, here's the treat: Many people offer a means to close the pop-up that has just opened. Again, they do this with either <a href="#"... or <a href="javascript:;... Like so: <a href="#" onClick="window.close()">Close</a> Well, like I said before, all this does is take them to the top of the page. Assuming the popup is linked on only one page we can take them back by placing the referring file in the hypertext reference: <a href="referrer.html" onClick="window.close()">Close</a>

    The use of the word "Close" might be confusing, but there are two schools of thought here.

    1. By not opening the new window on those w/o JavaScript, the back button still works and will use this

    2. Using a title will help them predict what will happen. Like so: <a href="referrer.html" title="clicking this link will take you back to the referrer if you don't have JavaScript" onClick="window.close()">Close</a>

    Alternatively, you might also use the alt text attribute of a transparent spacer image: <a href="referrer.html"><img src="path/spacer.gif" width="1" height="1" border="0" alt="[Go Back]"></a> (This assumes they're also surfing with images off or on a non-graphical browser)

    Ultimately, this comes down to what you hear me say so often: You cannot reliably predict the user or their settings. So don't try. Make it right and it will be usable to all.


    Opening new windows is bad enough as it is. The above article only aims at showing you how to make them better. The best answer is to not use them at all. Please see the following links for details -

    • Jakob Nielsen's Alertbox: The Top Ten New Mistakes of Web Design
    • Jakob Nielsen's Alertbox: Top Ten Web-Design Mistakes of 2002
    • Dive Into Accessibility: Day 16, Not Opening New Windows
    • Dan's Web Tips: Opening New Browser Windows

    About The Author

    Karl Groves is a freelance web designer who has done production work for such sites as National Cancer Institute, Network For Good and Aerospace Medical Association.

    DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

    More How To Articles
    More By Developer Shed



    - Traffic Down One Month? Don`t Panic
    - How to Handle Fake Reviews
    - Facebook Game Update Tweaks
    - Facebook Profile Tweaks
    - How To Download Your Facebook Profile
    - Facebook Tips for Hiding Your Friends List
    - Facebook Tips to Avoid Unwanted Friend Reque...
    - Blog Contests: Do it Right
    - Simple Technique for Memorable Headlines
    - Understanding Your Analytics Results
    - Your Guide to Creating Quality Back Links
    - Getting Your True Ranking: Going Beyond Goog...
    - Optimizing for Google
    - The Right Way to Build Reciprocal Links
    - Monetization: How Not to Put Multiple Ad Ven...

    Developer Shed Affiliates


    © 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap