Revised collapsible menu nav script

As per the suggestions made, I have revised my script.  It now
dynamically adds the expansion buttons after loading the page.  The
expansion buttons, which were once image form buttons, have been changed
to image links.  I have also added appropriate skip navigation links.
The script now also includes a check to see if the user has a DOM-aware
browser before activating the script.

 

I had checked the previous version of the script in HPR 3.0, JAWS 5.0
and Window-Eyes 4.2 and it seemed to function quite well in all respects
with one exception.  If JavaScript was turned off, the non-functional
image buttons containing the empty string were not ignored in the screen
readers and thus, they read the image source URL when encountering the
buttons.  I originally tried to solve this by dynamically adding image
form buttons after loading the page, which worked fine except on IE for
the Mac, which, apparently, doesn't allow you to specify the type of
input you wish to create and assumes you want to create an input text
field.  So, I finally decided to dynamically add image links as the
expansion buttons.

 

This works, but it created kind of convoluted code, as I suspected.  It
also behaves inconsistently on different browsers, with some accepting
the space bar key as the event that will activate the expansion button,
and others accepting the enter key, assumedly because that is activating
the redundant click event.  With enough diddling I might be able to make
it work more consistently, but I worry that will create a brittle jumble
of conditionals.

 

Also, the text spoken for the button in the revised version of the
script seems less intuitive to me than that spoken in the revised
script.  Before, the script would say something like "expand node:Image
button" or "expand node button" or "button: expand node."  Now it says
"Visited Link: expand node" or some such.

 

Window-Eyes doesn't seem to handle the revised script very well, in that
it doesn't allow you to jump to elements that have been revealed by
clicking the expansion button, and allows you to jump to elements that
have been hidden.  This is quite disappointing and I wonder if anyone
has any suggestions.  I don't know that I am yet convinced that the
image link method is better than the image button.

 

Finally, in order to allow users to tab to the expansion buttons, I had
to include the href attribute on the <a> element.  I didn't want it to
actually do anything though, so I just set its value equal to
"javascript:;"  This seems to work, but is a hack I am uncomfortable
with.  I believe it is frowned upon to call JavaScript from an href, and
this is basically what I am doing, even though the script does nothing.
Anybody know a better way of making dummy links like this?

 

I wonder if it wouldn't be better to go back to using image buttons and
just add a default alt value of "ignore button" or some such so that the
image source location wasn't read when viewed without JavaScript.  I
could even make them "display:none" by default and only make them
visible when JavaScript is enabled.  That would solve the problem for
all browsers except for those that neither support CSS nor JavaScript
and those would just have to put up with the annoying "ignore button"
being read.

 

The original script is now at:

http://courses.iddl.vt.edu/samplecoursev1/

 

The revised script is at:

http://courses.iddl.vt.edu/samplecourse/

 

Again, I'd appreciate any feedback.

 

Rob