How To
  Home arrow How To arrow A More Accessible Pop-Up Window
Affiliate Promotion  
Blog Help  
Domain Name Tips  
How To  
Newsletter Marketing  
Online Business Help  
Search Engine Tricks  
Web Development  
Web Hosting  
Website Advertising  
Website Content  
Website Marketing  
 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 to PHP 
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 
Whois
 
Forums Sitemap 
Mobile Linux 
APP Generation ROI 
IBM® developerWorks 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
HOW TO

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

    Table of Contents:

    Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      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
     
     
    ADVERTISEMENT


    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: http://www.w3.org/TR/WCAG10/#gl-new-technologies - "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: http://www.access-board.gov/sec508/guide/1194.22.htm#(l)

    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="window.open...... or: <a href="javascript:; onclick="window.open(....... 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 - http://www.w3.org/Addressing/URL/4_2_Fragments.html ). 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="window.open('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.

    Disclaimer:

    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

     

    IBM® developerWorks developerWorks - FREE Tools!


    NEW! A Layered approach to delivering security-rich Web applications

    As businesses grow increasingly dependent upon Web applications to provide services to customers, employees and partners, these complex applications become more difficult to secure. Although traditional security solutions protect Internet infrastructure layers, they do not guard against HTTP and HTML attacks. Many organizations that conduct security testing still deploy applications that allow attackers to manipulate their logic and wreak havoc on their business. To mitigate this risk, development and delivery teams must address Web application security throughout the lifecycle, addressing the many layers detailed in this paper.
    FREE! Go There Now!


    NEW! Don't wait! Try the Rational Application Developer (RAD) v7.5 open beta code today

    Download the Rational Application Developer (RAD) v7.5 open beta code and start developing applications for the JEE5 standard which features EJB3.0, JPA, JSF 1.2, JSP 2.1 and Servlet 2.5 standards. When you use this beta you will see how you can increase developer productivity for already existing applications with improved support for refactoring, as well as adding new features to existing applications. In addition, the beta provides tooling for JD Edwards, Oracle, SAP, Siebel and PeopleSoft to improve the developer productivity with these enterprise systems.
    FREE! Go There Now!


    NEW! Download IBM Rational Developer for System z

    Download a free trial version of IBM Rational Developer for System z, software that can help you deliver core development capabilities; the power of Java Platform, Enterprise Edition (Java EE); and rapid application development support to diverse enterprise application development teams. With comprehensive development tools to help create, deploy and maintain traditional enterprise and composite applications, Rational Developer for System z enables developers with different technical backgrounds to easily participate in important technology projects.
    FREE! Go There Now!


    NEW! Evaluate Rational Business Developer V7.1

    Visit IBM developerWorks to download a free trial version of IBM Rational Business Developer V7.1. Rational Business Developer offers rapid and simplified development of business applications and services through Enterprise Generation Language (EGL) tools, generating Java or mainframe solutions while shielding developers from technical complexities.
    FREE! Go There Now!


    NEW! Krugle, developerWorks, and code search

    Ken Krugler, co-founder of code search company Krugle, and Laura Merling, vice president of Marketing and Business Development for Krugle, join to talk about the ins and outs of code search and what it means as a new feature for developerWorks users.
    FREE! Go There Now!


    NEW! Run your first CICS application on a PC using TXSeries for Windows

    Learn the basics of the IBM Customer Information Control System (CICS). With a hands-on exercise, learn how to get your first CICS application up and running on your desktop using TXSeries V6.1 for Windows. The tutorial shows you how to download and install a free trial version of TXSeries V6.1.
    FREE! Go There Now!


    NEW! Software Change and Configuration Management Solution Guidelines

    This whitepaper provides areas to consider when evaluating any software configuration management solution. It addresses how the IBM solutions (Rational ClearCase and Rational ClearQuest) meet the needs and requirements of both project leaders and developers to provide successful Software Change and Configuration Management.
    FREE! Go There Now!


    NEW! Trial download: IBM Rational Tester for SOA Quality V7.0.1

    Get a free trial download of the latest version of IBM Rational Tester for SOA Quality V7.0.1, a functional and regression testing tool that enables the creation, comprehension, modification and execution of testing GUI-less Web services.
    FREE! Go There Now!


    NEW! Try the IBM SOA Sandbox for Process

    Visit IBM developerWorks to try the IBM SOA Sandbox for process. The SOA Sandbox for process focuses on providing a trial environment with the necessary tooling and components required to gain a better understanding of business processes and how to best improve existing business processes to derive value quickly.
    FREE! Go There Now!


    Refresh! IBM Rational Systems Development Solution eKit

    With IBM Rational Systems Development Solution, you can deliver products faster with higher quality. Within this kit, Read the “Model Driven Systems Development” white paper to see how to improve product quality and communication. Then check out the rest of the e-Kit to learn more about important topics that can affect the success of any software project through customer examples, tutorials, informative Webcasts, and best practices for designing, building and managing systems. From start to finish, at every stage in your projects, Rational Systems Development Solution can help your company reach its full potential.
    FREE! Go There Now!



    All FREE IBM® developerWorks Tools!

       

    HOW TO ARTICLES

    - An SEO Glossary for Beginners
    - How to Add a Secure Payment Feature to Your ...
    - Google and Mobile Marketing: How Can You Use...
    - Add Live Chat to Your Site
    - How to 301 Redirect Blogspot Blogs to Custom...
    - Managing Trolls
    - Is Your Optimization Working?
    - Why Not Ask for Donations?
    - Protecting Your Passwords
    - How to Create a Dating Site
    - Taking Spam Out of Your Site
    - How to Make a (Good) MySpace Page
    - How to Use Affiliate Programs
    - URL Redirection
    - How to Buy a Domain Name

     
    Create the Optimal Architecture for your Critical Applications
    Warburton's the largest independently owned bakery in the UK faced a number of d....

     
    Five Best Practices for Deploying a Successful Service-Oriented Architecture
    This white paper describes the benefits you can expect with SOA, and how IBM can....

     
    Gartner Magic Quadrant for Application Delivery Controllers
    Gartner summarizes its view on Application Delivery Controllers, evaluates stren....

     
    Knowledge is Power
    What you don't know can hurt you, and is likely costing you money and increasing....

     
    Rationalizing the Multi-Tool Environment
    The rationalized multi-tool approach is flexible, scalable and cost effective. I....

     




    © 2003-2009 by Developer Shed. All rights reserved. DS Cluster 2 Hosted by Hostway
    For more Enterprise Application Development news, visit eWeek