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
 developerWorks - FREE Tools!
|
As organizations integrate software into every aspect of business, they are constantly pressured to deliver faster, better, and cheaper results. Unfortunately, a “dis-integrated” software delivery approach reduces returns while increasing costs. This IBM Rational White Paper shows how Integrated Requirements Management aligns organizations around maximizing value and keeping pace with change.
FREE! Go There Now!
|
|
|
|
Get a free trial download of the latest version of IBM Rational Performance Tester V7.0.1, a load and performance testing solution for teams concerned about the scalability of their Web-based applications. Combining multiple ease-of-use features with granular detail, Rational Performance Tester simplifies the test-creation, load-generation and data-collection processes that help teams ensure the ability of their applications to accommodate required user loads.
FREE! Go There Now!
|
|
|
|
Join this webcast to learn how IBM Rational's Functional Testing solution enables you to implement automation your way, at your pace, with your existing staff. In this webcast, you’ll learn how you can eliminate redundancy of manual test scripts, reduce errors, and increase test coverage through test automation. After this presentation you will understand how IBM Rational Functional Testing solution can streamline your manual testing and make test automation easily attainable.
FREE! Go There Now!
|
|
|
|
Learn field-tested SOA principles, methodology, technology and implementation from the global SOA market leader - in a new e-book by an IBM SOA expert. Written by IBM Certified SOA Solution Designer Bobby Woolf, "Exploring IBM SOA Technology & Practice" is the ultimate insider's guide to SOA - a PDF e-book packed cover to cover with IBM's specific advice on how to make your SOA implementation a success.
FREE! Go There Now!
|
|
|
|
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!
|
|
|
|
Building a software-as-a-service solution requires addressing a few key technical challenges. In this webcast, we'll focus on the role of IBM Tivoli Directory Server and WebSphere Portlet Factory in creating a Software as a Service solution. We will demonstrate how to use Tivoli Directory Server to prevent the user population of one tenant from accessing the virtual portal and portlet components of another tenant. We will also use the dynamic profile capability of WebSphere Portlet Factory to create multiple highly customized applications from one code base.
FREE! Go There Now!
|
|
|
|
This whitepaper presents the benefits of successfully introducing static analysis into your organization using IBM Rational Software Analyzer. Additionally, it identifies some common pitfalls that can hinder the effective use of static analysis tooling as well as presents 10 simple strategies designed to help you quickly realize the value of static analysis using Rational Software Analyzer.
FREE! Go There Now!
|
|
|
|
This webcast outlines the best practices that must be instituted to gain the maximum benefit from SOA while maintaining high quality of service. Whether you are deploying new applications or managing and monitoring your existing infrastructure, learn how you can ensure high quality of services with SOA based solutions from IBM. All registrants who attend this live Web Seminar will receive complimentary access to a white paper titled “Maintaining QoS in an SOA Environment”.
FREE! Go There Now!
|
|
|
|
Secure your Web applications with IBM Rational AppScan Standard Edition V7.7, previously known as Watchfire AppScan. This Web application security testing tool automates vulnerability assessments and scans and tests for common Web application vulnerabilities. Visit IBM developerWorks to download a free trial of IBM Rational AppScan Standard Edition V7.7.
FREE! Go There Now!
|
|
|
|
User communities play an important role in communication and collaboration around products, solutions and other areas of special interest to members. Successful communities are able to provide the right mix of content and services to deliver a value proposition that resonates with each audience. Join Tom Inman, VP of Marketing for Information and Platform Solutions as he introduces the new LeverageINFORMATION community. During this webcast, learn about the value provided by the community and how customers and partners derive value from the community in addressing their own technical and business challenges.
FREE! Go There Now!
|
|
|
|
All FREE IBM® developerWorks Tools!
|
