|
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: 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
|
