Recently I came across a site that has a less than accessible horizontal main navigation bar with drop-down menus containing links to the different pages in each section. This got me thinking once again about the use of drop-downs from an accessibility perspective.

In particular, I thought it might be useful to consider the different ways drop-down menus are used with the aim of hopefully identifying the best way of providing keyboard and screen reader access to the main navigation and drop-down items.

I sent out a request asking people to suggest drop down menus that I should look at. Many thanks Denis Boudreau, Rick Ellis, Thierry Koblentz, Chris Hoffman and Priti Rohra for their suggestions and advice. I would also like to thank Russ Weakley, Andrew Downie and Grant Focas for suggestions, menu testing and help in preparing this article.

My aim with this article is not to look at the technical side of how drop-downs are prepared; rather I am concerned with the user-experience for people who rely on the keyboard to access the web, with and without a screen reader.

It seems that there are three basic types of navigation systems which use drop-down menus:

1. Full tab, where the user tabs through the main navigation menu and all the drop-down options for each item.
2. Tab and arrow, where a combination of tab and arrow keys can be used to move between items in the main navigation menu and the drop-downs
3. Tab and enter, where the main navigation item is not a link and you can tab from main item to main item. When enter is selected on a main item the drop-down is presented and the tab key or arrow key is used to move between the choices.

Examples

The following four examples of different navigation menus with drop-downs can all be accessed with the keyboard and to varying degrees are likely to be accessible to screen reader users. The testing of these sites was done using browsers with JavaScript enabled. (NB: when I refer to using the tab key, this includes shift+tab for moving backwards.)

These examples were tested with the following system configurations: Windows XP and 7 using I.E. 8 and Firefox 3.6; Apple OSX with Safari 5.0 and Firefox 3.6. They were also tested using recent versions of the following screen readers JAWS, Window Eyes and NVDA. With some quirks and subtle differences, the screen readers all appear to behave reasonably consistently. 

1. Full tab

The Museum of East Anglia Life website has a main navigation menu with drop downs that can only be accessed by tabbing.

Keyboard only with Windows and Mac: With Win/IE8, Win/Firefox 3.6, Mac/ Safari 5 and Mac/Firefox 3.6, when you tab from one main item to the next, the drop-down menu for the item is presented and it is necessary to tab through all the links it contains in order to move to the next main item. The keyboard arrow keys do not work with either the main navigation or the drop-downs.

Keyboard with Screen reader: With the tab key you move through all the links, similar to above. However if you use the arrow keys, you can just go from main item to main items. It appears that when you use the arrow key to go to a main navigation item and then press the tab key the drop-down menu choices are presented and you can move through the options with either tab or arrow. The presence of sub-items and how to access them is not conveyed to the screen reader user.

2. Tab and arrow example 1

The Mozilla website has main navigation items that can be accessed with the tab key or the arrow keys.

Keyboard only with Windows and Mac: With Win/IE8, Win/Firefox 3.6, Mac/ Safari 5 and Mac/Firefox 3.6, you can move between the main navigation items using either the tab key or the left/right arrow keys. When on a main navigation item, pressing the down arrow key opens the drop-down and you can use the up/down arrow keys or the tab key to move through the drop-down choices.

Keyboard with screen reader: With the screen readers it was not possible to use the arrow keys to open and use the drop-down menu. However, pressing enter on each main navigation item took the user to the relevant section landing page. If the screen reader user decides to abandon normal behaviour and try the menu with the Virtual Cursor turned off (insert+z with JAWS), the arrow key will cause the content of the drop down menu to be presented. But with JAWS the items are read out as a continuous list so it is virtually impossible to make a specific choice from a menu.

3. Tab and arrow example 2

This example for Yahoo Developers also allows the user to use the tab or arrow keys to move between main navigation items, however the selection of drop-down menu choices appears to be different.

Keyboard only with Windows and Mac: With Win/IE8, Win/Firefox 3.6, Mac/ Safari 5 and Mac/Firefox 3.6, you can tab from main navigation item to main item and when you press the down arrow the drop-down is presented. If you move from main item to main item with the left/right arrow keys each main navigation item is presented with the drop-down open. You use either the tab key or the up/down arrow keys to move through the drop-down options.

Keyboard with screen reader: The screen reader provides no indication to the user that there is a drop-down or how to access it and without any indication many screen reader users a likely to keep pressing the enter key in the hope of something happening. If the “virtual cursor” is turned off, when you press the down arrow key, the menu is reported but as you move down the drop-down items, with JAWS at least, the screen reader also reads content from the page directly after each item. However, if you use the down arrow to open the menu and then tab through the items just the drop-down items are reported. Yahoo “Communication” drop-down menu contains an item, PIM, which can be expanded to present third level items by pressing the right arrow, but again there is no indication that this item can be expanded or how to do it.

4. Tab and enter

With some sites, the main navigation item is not a link and the drop down menu for each item is accessed by pressing the enter key. It should be noted, that in this example from TJK Design, it appears that “Articles: E-K” page is the active page.

Keyboard only with Windows and Mac: With Win/IE8, Win/Firefox 3.6, Mac/ Safari 5 and Mac/Firefox 3.6, you tab from main navigation item to main item, but the main navigation items are not links to the landing page for each section. When focus is on a main item, pressing the enter key opens the drop-down menu, which can then only be accessed with the tab key. However, when tabbing through the main navigation items, the drop-down menu of the current page is presented when you tab to the main navigation item for that page. You can then use the tab key to move through the drop-down options related to this section.

Keyboard with screen reader: Keyboard access appears to function in the same way as described above, with the screen reader reporting each item as you tab to it and when you tab to the main navigation item for the active page the drop-down opens and you can move through the options, but in this case with either tab key or the arrow keys. For main navigation items relating to pages that are not the active page, pressing enter will open the menu and then you can move through the menu with either the tab or arrow, but tab seems a little easier to use.

Conclusion

After reviewing these menus, I have a far better understanding of why most of the people I know who rely on the keyboard to use the web have a pretty negative impression of drop-downs. Without a mouse, they are difficult to use and it appears that you can not expect them to perform in a consistent fashion.

It is hard to make a definitive statement about which drop-downs are likely to be the most accessible, in part because I think it will depend on the particular circumstances of each site. For example, a site with very few main navigation items and only a few drop-down options is not likely to present a big problem for someone who has to tab through all of them. On the other hand, if the main navigation and drop-downs contains hundreds of links, tabbing through all them could be a serious problem for some people.

From this limited testing, it seems to me that the usability and accessibility of drop-downs for screen reader users and for other people who rely on the keyboard to access the web would be significantly improved if there was a generally agreed (standard) behaviour for drop-downs and information about how to use them without a mouse was available to all users. I think these are the two key issues associated with the use of drop-downs and I would be very interested to know what other people think.

Which is better and why?

1. Is it better to rely on just the tab key rather than a combination of tab and arrow?
2. If we do rely just on the tab key, is it better to force keyboard users to tab though all the drop-down options? Or should you allow keyboard users to only tab from main item to main item, for example, and then they make the next level of choices on the section landing pages?
3. If a combination of tab and arrow keys is the way to go, what is the best approach? And, how many keyboard users would even think of using the arrow keys? Not many I suspect, so what is the best way of informing them?