No subject


Tue Dec 6 21:10:36 EST 2011


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=3D"#contact">Contact me</a> will take you to a place on the page =
that is named "contact" - <a name=3D"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=3D"file.html" onclick=3D"window.open('file.html', 'window_name', =
'toolbar=3Dyes, location=3Dyes, status=3Dyes, menubar=3Dyes, =
scrollbars=3Dyes, resizable=3Dyes, width=3Dxxx, height=3Dxxx'); 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=3D"#"... or <a =
href=3D"javascript:;...
Like so: <a href=3D"#" onClick=3D"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=3D"URL_to_referrer.html" onClick=3D"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=3D"referrer.html" title=3D"clicking this link will take you back to =
the referrer if you don't have JavaScript" =
onClick=3D"window.close()">Close</a>

Alternatively, you might also use the alt text attribute of a =
transparent spacer image: <a href=3D"URL_to_referrer.html"><img =
src=3D"path/spacer.gif" width=3D"1" height=3D"1" border=3D"0" alt=3D"[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 -=20

Jakob Nielsen's Alertbox: The Top Ten New Mistakes of Web Design - =
http://www.useit.com/alertbox/990530.html=20
Jakob Nielsen's Alertbox: Top Ten Web-Design Mistakes of 2002 - =
http://www.useit.com/alertbox/20021223.html=20
Dive Into Accessibility: Day 16, Not Opening New Windows - =
http://diveintomark.org/archives/2002/07/01/day_16_not_opening_new_window=
s.html=20
Dan's Web Tips: Opening New Browser Windows - =
http://webtips.dantobias.com/new-window.html=20

Karl L. Groves, Certified Master CIW Designer
E-Commerce Manager
NASA Federal Credit Union
500 Prince Georges Blvd.
Upper Marlboro, MD 20774

301-249-1800 ext.497
Fax: 301-390-4531

Opinions expressed in this e-mail represent only myself and are not in =
any way to be taken as the words or opinions of my employer.=20



More information about the Sigia-l mailing list