October 31, 2002
More Accessible DHTML Menus
The horizontal navigation bar used here on scottandrew.com is actually an unordered list of links. I used CSS rules to flatten out the list and create the rollover effects. In browsers that don’t support CSS, the nav appears as a normal list.
Dave Lindquist has taken this same basic concept one step further with these awesome DHTML menus. Both the dropdown and expandable tree variations are simple lists built with 100% valid XHTML. CSS and DOM scripting are added to extend the functionality. Dave even goes so far as to use ACCESSKEY attributes to make parts of the menu accessible via keyboard shortcuts. The result is a more widely accessible menu that doesn’t sacrifice the whiz-bang functionality of DHTML. Try turning off the CSS rules (with a handy “Toggle CSS” bookmarklet) while viewing the menu demos and you’ll see a plain, fully-accessible list. Better yet, run it through Delorie’s LynxViewer to get an idea of how a non-graphical browser would handle it. Sweet.












