Recommended WAI-ARIA implementation for navigation bar/menu

Question

We are in the process of implementing (i.e. adding) WAI-ARIA support to the main navigation menu of a web portal. Menu is the one shown here:

Answer 1

The ARIA design patterns provide expected UI behaviour for a range of custom controls http://www.w3.org/TR/wai-aria-practices/#aria_ex use of esc key to close and return to triggering element upon close is standard UI across desktop and web. Try it on any Google docs app (for example).

Answer 2

+Escape key should close an open menu and return focus to the element that opens it.

Answer 3

A possible implementation would be:

HTML structure:

<div> <!-- Outer wrapper -->
  <ul> <!-- Main navigation bar container -->
    <li> <!-- First-level item without submenu -->
      <a> <!-- Destination URL -->
      </a>
    </li>
    <li> <!-- First-level item with submenu -->
      <a> <!-- Destination URL -->
      </a>
      <ul> <!-- Second-level menu container -->
        <li> <!-- Second-level item -->
          <a>
          </a> <!-- Destination URL -->
        </li>
      </ul>
    </li>
  </ul>
</div>

Roles:

• role=”navigation” for outer wrapper <div>
• role="menubar" for <ul> navigation bar container
• role="menu" for second-level <ul> containers
• role="presentation" for first- and second-level <li> menu items (they are not needed in the exposed accessible menubar structure)
• role="menuitem" for first- and second-level <a> menu items

Properties:

• aria-haspopup="true" for first-level <a> menu items having a submenu
• aria-labelledby="ID of previous <a> menu item" for second-level <ul> containers

States:

• aria-selected="true" on currently visited first- or second-level <a> item; aria-selected="false" on the other <a> items. That is to enforce the concept “selected <==> current page”
• aria-expanded="true/false" for second-level <ul> containers
• aria-hidden="true/false" for second-level <ul> containers
• aria-activedescendant="" for main <ul> navigation bar container. This is an alternative to working with tabindex
• tabindex=0 on currently visited <a> item; tabindex=-1 on the other <a> items. That is in order to first focus on the current page when tabbing to the navigation bar. It is an alternative to working with aria-activedescendant

Keyboard:

• Tab: Move focus in/out of the menu from other points in the web application.
• Shift+Tab: Move focus in/out of the menu from other points in the web application, in the reversed order.
• Right arrow: Next navigation bar item
• Left arrow: Previous navigation bar item
• Enter: Activate currently focused item (i.e. navigate to corresponding URL)
• Space: Activate currently focused item (i.e. navigate to corresponding URL)

Aug/2014: aria-selected Vs menuitem

In reply to @Joshua Muheim comment: now I can see from here, as well as from his reference, that aria-selected attribute is not allowed for menuitem role.
As I read from this recent SO answer there are some solutions given the current state of things, and there is a new proposed attribute too.

Answer 4

As an FYI, you can get a menu to announce 'X of Y' information by adding aria-posinset and aria-setsize attributes to the elements with role=menuitem. Sincerely, Bryan Garaventa

Answer 5

Escape to close is a standard going way back, it is expected behavior by many users.