A few months ago we posted a tip about our accessibility compliant drop-down menus. An alert reader correctly pointed out that the menu didn't drop down if you tabbed through the links. That goes to show that there are multiple types of accessibility issues you need to be concerned with. Our original solution only looked at screen readers and ignored users that could not use a mouse. The good news is, we have updated the site and now the drop-down menu items will appear when you use a tab to go through the links.

The first problem with the original solution was that the heading Hints/Tips was not actually a link. So when you would tab through the list of links, it would never stop on that category. So we had to fix that. We chose to do that by making the drop-down arrow next to the heading into a link. But that link really isn't one that should be used. So we made the link go nowhere by using this syntax:

<a href="#">

But in order to make the drop-down menu appear, we have to call some JavaScript. And remember that this is needed when a user tabs to the link. So no mouse is in use. Anchor links have an "onFocus" event that can be used. So our link around the drop-down arrow image becomes:

<a href="#" onfocus="tabToArrow()" class="nohighlight">

We'll get to the JavaScript and the class definition in a moment. The next thing we needed to do is to make the menu disappear when you tab away from the drop-down. So we want to run a JavaScript function when focus goes to the menu item right after the drop-down. (The way the tab will work is that you'll tab to the drop-down arrow, which causes all the sub-menu items to appear, and you'll tab through them in order, then tab to the next main menu item). Since the Breaking Par menu is dynamic based on web site content stored in the Notes database, we just put the JavaScript function on to all the main menu items, but made sure it was not on the sub-menu items. Otherwise, the sub-menu would disappear as soon as you tabbed into the first sub-menu item. So all the main menu links become:

<a href="..." onfocus="tabAwayFromArrow()">

Since a new link was added to the page (around the drop-down arrow) we didn't want the standard style sheet definition to be applied when a user with a mouse would move over the link. So that's where the class definition comes in. We added a new entry to the CSS file:

#allcategories ul li a.nohighlight:hover {
    background:#C0C0C0;
    color:#483D8B;
}

Basically, this simply says to use the same foreground and background colors as the non-hover state. So users with a mouse won't notice any change when they move over the drop-down arrow. The pop-up list of sub-menu items should have already appeared for them when they moused over that main menu item.

Now all we need is the JavaScript to make it work. This looks very similar to the "startList" function we created in the original tip. This function is kicked off when you tab to the down-arrow image.

function tabToArrow() {
   if (document.getElementById) {
       navRoot = document.getElementById("allcategoriesnav");
       for (i=0; i<navRoot.childNodes.length; i++) {
           node = navRoot.childNodes[i];
           if (node.nodeName == "LI") { node.className += " over"; }
       }
   }
}

The only difference between this and the original is that instead of defining a function for later, we change the class name immediately. And this function is necessary in both IE and Firefox (the original was only needed to work around a problem in IE).

When you tab to another main menu item, the drop-down menu should disappear. This function takes care of that:

function tabAwayFromArrow() {
   if (document.getElementById) {
       navRoot = document.getElementById("allcategoriesnav");
       for (i=0; i<navRoot.childNodes.length; i++) {
           node = navRoot.childNodes[i];
           if (node.nodeName == "LI") {
               node.className = node.className.replace(" over", "");
               node.className = node.className.replace("over", "");
           }
       }
   }
}

This is very similar to the other, except we are removing the word "over" from the class name. We found out in testing that Firefox would trim the class name, so that's why both "replace" statements are necessary. Again, we change the class name immediately, which will hide the drop-down based on our CSS definitions defined in the original tip.

So, there you have it. Hopefully now the drop-down menu is truly accessible, and not just partially accessible.