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:
Menu is implemented by means of classic / DOM tree, styled with CSS to look like horizontal tabs.
What is a WAI-ARIA compliant implementation for such a widget?
I've read many parts of most recent WAI-ARIA specs from w3org for a general understanding, taxonomy, and so on. Then I've read about several examples of UI widget implementations. I could not find any example specifically targetd at such a CSS navigation menu. The closest widgets I've always found around are the Menu, the MenuBar, and the TabPanel. Of course I also looked in Free ARIA Community group (where this question was originally posted).
I'd say that none of those widgets exactly match a (CSS) navigation menu. As an example, TabPanel may control some content in the page (--> aria-controls), maybe MenuBar too; but I'm not at all sure that a navigation menu controls content in the page (it controls the next page to show). Without going further, there are some other differences as well. References are at the end of the post. If anyone as better (or more fit) examples of navigation menu, we'd be glad to know about them.
References
- https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Test_Cases#Menubar_and_Menu
- http://wiki.jqueryui.com/w/page/38666403/Menubar
- http://www.oaa-accessibility.org/examplep/menubar2/
- http://test.cita.illinois.edu/aria/menubar/
- http://dev.aol.com/dhtml_style_guide#menu
- http://whatsock.com/modules/aria_tabs_menu_modules/demo.htm
- http://www.w3.org/TR/wai-aria-practices/#menu
- http://www.w3.org/TR/wai-aria/roles
- http://www-03.ibm.com/able/resources/wai_aria_intro.html