Dropdown Menu Test: Simply Accessible

This is one of several dropdown menus tested on Terrill Thompson's Dropdown Menus Test Page.

Description

This page applies techniques described in Derek Featherstone's article Better For Accessibility, and specifically uses code from his Option 6 example.

To exit the menu, press tab again and you should land safely in this paragraph.

Observations

• This is a highly accessible menu that uses ARIA markup to provide additional semantics that help screen reader users to fully understand the interface as they interact with it.
• Uses very clean HTML code, so is easy to setup. All ARIA markup is added automatically via JavaScript.
• This menu closely closely follows the DHTML Style Guide.
• Differs from YUI and OAA menus in that all menu items are accessible via tab.
• The original menu (Option 6) doesn't work as well as I would expect it to with screen readers. Although it uses all the same ARIA markup as the YUI and OAA menus, screen readers don't seem to recognize it as a menu (for example, they announce "Link About", rather than "Menu About, to read the items press up or down arrow keys". The problem seems to be that the ARIA markup (role="menuitem" and aria-haspopup="true") are added to the LI element, but the focusable item is the link inside that element. If focus is moved to the LI (using tabindex="0"), this problem is corrected.
• The arrow keys work great without a screen reader, but if JAWS is running it seems to intercept keystrokes and not release them to JavaScript. This isn't true of YUI and OAA menus, so maybe it has something to do with the method by which keystrokes are being captured. Still troubleshooting this...
• I left some of the CSS intact from Derek's original, as it provides a great example of CSS3 style effects such as rounded corners and gradient backgrounds.