Long dropdown navs are misused often as a result of little thought. I prefer having sub items nav on the sub page where it can be given context. That might be “one more click” but it’s better than the two or three that might occur as a user tries to understand a complex nav structure.

If the dropdowns have just a few items then I guess it might be useful to all but I try to avoid them on every main nav still and have a sub nav on the sub page.

The trouble with selecting any option, a standard or not, is that user may not like them, the change might confuse them as they have developed managing behaviours.

I’d be interested in hearing any use of heading tags in main navs, would screen reader users prefer the familiar heading navigation?

There is the mobile user issue too, where the oft used :hover is used to show dropdowns. That clearly doesn’t function and if the main nav is only accessible by a keyboard stroke. Compacting that is where the main nav acts as a link as well, tapping or clicking on it will cause a navigation so the dropdown isn’t even seen.

I think this is a much more complex situation that it might appear.

On your question Which is better and why?
Once we have a standard this will no longer be such an important question but in the mean while …
I (as a sighted occasional keyboard user) like nr. 2 Tab and arrow. This because I am used to use arrow keys for navigating in window menus and it saves me from tabbing trough all items in the menu.

By the way have you considered testing with speech recognition?

First, the Yahoo! menu you’re reviewing uses YUI2. The accessibility of the YUI3 menu (called MenuNav Node Plugin) is much improved. There are several examples linked from this page:

http://developer.yahoo.com/yui/3/examples/node-menunav/index.html

Also, the DHTML Style Guide Working Group is a group of people representing a couple of dozen organizations, working together to define a standard interface for various DHTML widgets. Here’s what they have to say about the “menu” widget:

http://dev.aol.com/dhtml_style_guide#menu

Thanks for the good review, Roger! I would be interested in hearing from more JAWS users about their preference for using enter or the arrow keys to initiate a dropdown menu. Since enter is commonly used to instigate a function, and arrows are commonly used for moving through lists, it seems like we have a hybrid situation. As a sighted person, I would think that it would be more convenient and more intuitive to move through a list of subpages using arrow keys, eliminating the need for pressing enter. But perhaps that would be confusing for screen reader users?

At any rate, a nice writeup on an important topic!

At any rate, a nice writeup on an important topic!

Very interesting article thanks!

I built the Museum site a few years back now using the Suckerfish jQuery plugin for the main navigation. I like the Mozilla approach of enabling the arrow keys though because tabbing down through big lists would get tiresome pretty quick. I’m surprised the Yahoo! menu had shortcomings, they’re usually on the ball when it comes to accessibility but as you say, we still don’t have a consistent method and any technique would have to be covered on a site help page. I think we’re there with regards to using nested lists (I hope) - *just* the behaviour to sort now!

Thanks again, Karl
@singlecelldsgn

I am a Jaws user and I prefer the method where tabbing will take one to the main items and then hitting enter on the item opens the drop down and one can navigate by either tab or arrow. Using some form of message saying something along the lines of “press enter to expand” or something along those lines when the main item gets focus would also help.

If we can make drop-down menus wherein users can navigate through the main options using the Tab as well as Left/Right Arrow keys would be an icing on the cake!

Cheers,
Priti Rohra