Dropdown Menu Test: Customized OAA Menubar

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

Description

This page uses HTML5/ARIA primarily using methods from the Menubar example on the Open AJAX Alliance website.

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. This is very easy to use with JAWS and NVDA, and works beautifully with keyboard alone.
• This menu closely closely follows the DHTML Style Guide.
• Each top-level menu item is in the tab order (tabindex="0") so users can still access those items using conventional methods. If they press enter to select one of those items as they typically would in the old model, a submenu appears. As currently implemented they must use the down arrow to navigate into the open submenu. Each menu item has tabindex="-1", which could be changed to tabindex="0" when their parent menu becomes visible if we desired that functionality. However it might be preferable to preserve tab solely for navigating between top-level menu items.