Accessible menu test

Update 2004/10/21: This launched on the TexasOnline live site a few weeks ago.

Update 2004/10/07: I just noticed the last “production-ready” build caused a bug in Window IE5. I've fixed that bug (in the JavaScript file) and integrated the menus into the TexasOnline test web server.

Update 2004/08/27: Production ready (with one slight cosmetic bug noted below) though the code is still subject to change.

Update 2004/07/20: Added workaround for cosmetic browser bug noticed in Win IE 6. Before, IE would not display selected link color when tabbing through the links backwards (shift+tab). Adding the following empty style block fixed IE’s lousy attitude.

a:link:active, a:visited:active {}

Update 2004/07/15: Added the functionality for menus to reposition themselves if they displayed outside the bottom edge of the browser viewport (Thanks to James Tikalsky and Doug Cook for their help with this step). Unfortunately this required adding two style values to the script that are specific to this style sheet. Not a big deal considering the final purpose.

Update 2004/06/22: These menus are not yet “production quality.” In 2003 I reconsidered the needs of the users due to strong feedback from Jim Thatcher and Jim Allan. Even though the menus were “accessible” to the keyboard, they were not still not “usable” by blind people because of the sheer number of links on the target site, TexasOnline. Instead of including the sub-level links in the HTML, I’ve added them to the DOM from a JavaScript array. While the sub-levels are not accessible to the keyboard, disabled users get supplementary navigation on any page following the the top-level links.

See Jim Thatcher’s web course section on hidden content for a more-detailed explanation of this technique.

The the old version of the menus is still available.


This is a test for replacing the menus on the TexasOnline website with non-proprietary, DOM-compliant, semantic, accessible, unordered lists. Toggle the CSS on this page to see what they look like without stylesheets.

Note: The sub-menus are not available without JavaScript, but these are supplemental navigation. The TexasOnline site has redundant links available from each main section to every sub-section and is therefore completely accessible. Please do not note this as an error in your comments.


Known defect(s)

  • Mac IE 5.x only

    There is some slight "movement" in the menus when a submenu is activated. Even though they use the exact same style sheet, this defect was not present in the old version of the menus. The only difference is that the new version loads up the submenus via DOM interface, and the contents of old submenus were hardcoded into the HTML source.

    It is my belief that this is a bug within the Mac IE DOM interface and, unless we find otherwise, we should move ahead with implementation for the TexasOnline website. The bug is not present in any other browser.


Last updated: October 21, 2004.
If you have any other feedback, please email me.