Accessibility guide

I have no particular expertise in this area, but hopefully through my knowledge of the script I can pass on a few ideas for making your site navigation easier to use. I'll also be describing how the menus can be set up to respond to key triggers.

A few ideas

• The top navigation bar can be entirely transparent, and superimposed over an HTML navbar. This is useful for degrading with unsupported, text-only or speaking browsers, or for those with no javascript support. The technique is described in this tutorial, which is written with image-based layouts in mind, but equally applies to simple text navigation.

• You can add descriptive alt text to your links, as a way of describing sections more fully while keeping the actual link text short and concise. All links can have alt text as a tooltip or status bar message, with the text itself being defined as part of the menu and link definition arrays.

• Large yellow text on a black background is a good choice if you want a high-contrast color scheme; it's easier for people with poor vision to read, and is also visible to those with red/green color blindness.

• If a set of top links all have menus attached to them, my experience is that many people assume they're not links, and look only in the submenus for something to click. For this reason it's good practice to duplicate those links as items in the submenus.

• The playschool demo is designed with children in mind. The large text and bold color scheme helps to make the menu approachable and easy to read, while the slow menu timer means that small hands don't have to move the mouse too carefully. The menus also employ a variety of amusing visual transitions.

Key triggers

It's possible to define key triggers for the submenus. They can be any letter except C, which is reserved as a menu-closing key. The trigger keys are defined as part of the main link definition arrays.

Each submenu is opened when you press the relevant key, but you should note that key-triggering will only work if the page focus is not inside a form element, and there is a good reason for this: Imagine if every time you typed a particular letter, a menu would open and take the focus - it would be impossible to type that letter into any form boxes. To get round this, the key trigger is qualified to return false if the page focus is inside a form.

When a menu is opened using a key trigger, focus is automatically sent to the first link in the menu. This means that the top links themselves are only accessible via the mouse, but you can avoid this being an issue by duplicating those links as items in the submenus.

The key-navigation mechanism is pretty simple, and hopefully intuitive to use. Once focus has been sent to a menu:

• navigate down it by pressing the same trigger key repeatedly. When you pass a link which has a child menu, it opens but doesn't take the focus
• move onto an open child menu by pressing the left or right arrow key, and navigate down it by pressing the same arrow key repeatedly
• at any time press c to close the menus, or press the enter or return key to go to the currently highlighted link

Links are highlighted by activating the submenu rollover behaviour. Therefore if you have neither a rollover or hover color defined for the submenus, there will be no visual reference to navigate by.

If you intend to use key triggers, you may like to add a note of explanation on your page, explaining how to use it. It's also a good idea to indicate the triggers by underlining that letter, as I have done on this menu. The underline is done using a span class rather than a <u> tag, because key navigation is only available in Internet Explorer 5 and 6, so only these browsers should have access to the style properties which make that letter underlined. The necessary class has already been defined in style.js, so you can use it like this:

addMainItem("index.html","<span class='u'>U</span>ltimate Dropdown Menu",188,"center","","",0,0,"u");