Is a role="application" within a role="navigation" valid?

Question

We are currently testing some aspects of the new PostFinance.ch website.

We experienced that in Firefox and Chrome, NVDA successfully detects the menubar (div#topNav) as application (one can enter and leave it using Enter and Esc), while in Internet Explorer, it doesn't.

After inspecting a bit in IE, I found out that IE doesn't seem to like this:

<div role="navigation">
  <div role="application">
    ...
  </div>
</div>

When changing the attributes directly using the DOM Inspector to the following and reloading NVDA (NVDA+F5), it's working:

<div role="application">
  <div><!-- No role here! -->
    ...
  </div>
</div>

But it doesn't announce both "Navigation" and "Application", but only "Application", while in FF and Chrome (in the original) it announces both, which is kind of useful I feel.

Now my question: who is correct, FF/Chrome or IE? And is it allowed to "assign many roles" to an application? Is there a way to maybe do even something like this: <div role="application navigation">?

And it would be also interesting whether JAWS or other AT behave the same way?

Answer 1

I would not use the role=application landmark in this case, since the role=navigation is sufficient by itself. The goal of landmarks is to improve navigation and to provide an overview of the content on the page. Adding more(and nested) landmarks adds clutter, complexity and doesn't provide anything useful for the user. FWIW, I've never found a need to use role=application.

For reference, please read Marco Zehe's recommendation - this is a few years old, but I think it is still very relevant: http://www.marcozehe.de/2012/02/06/if-you-use-the-wai-aria-role-application-please-do-so-wisely/

Another thing to keep in mind: use ARIA sparingly. Looking at the code for this menubar, some of the ARIA attributes are misused and do not provide any value. The menubar doesn't quite work as it should either.

A great example of how a menubar should work: http://test.cita.illinois.edu/aria/menubar/menubar1.php

Note: they use role=application, but it's not needed for the menubar functionality.

Also, the DHTML Working Group has some recommendations on how a menubar should work. Essentially, a menubar is a toolbar with popup menus. See: http://access.aol.com/dhtml-style-guide-working-group/

I hope this is helpful.