ARIA label for menu widget not read

Question

UA: Mozilla Firefox 28.0; AT: JAWS 14.0.1534 and NVDA 2014.1; OS: MS Windows 7 Professional SP1

Given the following simple ARIA-enhanced menu widget, why is the associated 'Where to go' label never read? It's been my understanding that labels associated with focusable elements should be announced when focus is received. Instead, only the menu item's text is read.

<div role="application">
<ul id="main-menu" role="menu" aria-label="Where to go" aria-activedescendant="item-1" tabindex="0">
    <li id="item-1" role="menuitem"><a href="page-1.html" tabindex="-1">First page</a></li>
    <li id="item-2" role="menuitem"><a href="page-2.html" tabindex="-1">Second page</a></li>
    <li id="item-3" role="menuitem"><a href="page-3.html" tabindex="-1">Third page</a></li>
</ul>
</div>

Is it some kind of "optimization" as to prevent excessive information to be read to the user everytime the menu received focus? Like, the contents of the "menuitem" would be prioritized over the labelling of the containing menu widget. Of course, this is just a wild guess. Does anybody have more details that could help clarify the above situation?

A related question based on the same code sample: I've found out that doing away with the containing div (the one with the role="application" attribute) changes absolutely nothing regarding the behavior of the widget (there's Javascript code for controlling keyboard interaction and updating the UL's aria-activedescendant attribute). When do you actually need a container with role="application"?

My first guess was that it was the application role messing it up. Ted Drake wrote an article about the application role that may help some. — Ryan B

AlastairC AlastairC · Accepted Answer · 2014-03-26T21:40:00

Based on the example, it doesn't look like something that should be a menu.

The menu role is intended for application style menus which pop-up sub-menus. See this menubar example.

Upon tabbing to the menu, you then use arrow keys to navigate, not tab.

What you've got (so far at least) is simple navigation, and on a website the most appropriate mechanism is standard links.

  <nav aria-label="Where to go">
  <ul id="main-menu">
     <li><a href="page-1.html">First page</a></li>
     <li><a href="page-2.html">Second page</a></li>
     <li><a href="page-3.html">Third page</a></li>
  </ul>
  </nav>

The aria-label may or may not be read out by a screenreader (in a brief test NVDA did not, VoiceOver did), if that is important hide an off-screen heading above the menu. However, that label is used if the user navigates by "landmark".

If you do go for a full menu, I'd try the accessible Adobe mega-menu.

ARIA label for menu widget not read

1 Answers