Apply appropriate ARIA roles to the navigation menu

• Type: Bug
• Status: Closed
• Resolution: Fixed
• Affects Version/s: 6.2.0 CE B1
• Fix Version/s: 6.1.X EE, 6.2.0 CE B2
• Component/s: Accessibility, ~ [Archived] Frontend Infrastructure
• Labels:
  • QA-R
• Branch Version/s:
  6.1.x
• Backported to Branch:
  Committed
• Epic/Theme:
  • Escalation
• Story Points: 3
• Fix Priority: 4
• Git Pull Request: https://github.com/brianchandotcom/liferay-portal/pull/13035

In order to text this, you will need a screen reader. Chrome VOX works really well.

Right now, our navigation menu is not very screen-reader friendly since we don't provide enough ARIA roles and screen readers have a hard time allowing users to use it.

The issue is that when we try to traverse our website using keyboard, though every things works fine but when the control reaches the Menu, we cannot use TAB key to navigate through the menus. We can traverse through the menus only using the ARROW keys.

When we run the screen reader tool, it reads each character in the menu rather than the whole word.May be it is behaving so because we are traversing the menu using Arrow keys.Is there a way that we can use TAB key for traversing through the menu in Liferay?

We have tested on IE,FIREFOX and CHROME browsers.
Screen Reader Tool : NVDA Tool.

See different resources for implmenting this:
Accessible dropdown menus - http://terrillthompson.com/blog/202
this blog actually has our sames questions and provides different solutions (we should probably go with one of those...)

Question in stackoverflow - http://stackoverflow.com/questions/12279113/recommended-wai-aria-implementation-for-navigation-bar-menu

they recommend to follow our keyboard pattern, however, I think they are defining the roles better than we are (I think we are missing several roles in our menus)

Mega menu accessible in adobe.com - http://blogs.adobe.com/accessibility/2013/05/adobe-com.html
this is a blog entry from adobe explaining how they made their mega menu accessible.