WebAIM - Web Accessibility In Mind

E-mail List Archives

ARIA for main navigation bar


From: Judith.A.Blankman@wellsfargo.com
Date: Apr 22, 2015 8:09PM

I'm working with developers who are creating a menu bar at the top of a page just (below the main masthead/banner region). Visually it looks like a solid horizontal bar with 4 segments. Each menu item has submenu items stored in a div that is intended to display upon the usual means of interaction. We want to give them the best guidance since they are coding this from scratch.

I think I'm answering my own question by sending this email.

Since I'm still a bit green when it comes to ARIA, I just wanted to confirm that they should code this using ARIA for menubar and not tabs. We were thinking since they don't look like function like tabs that "role=menubar" made more sense.

There are visual hover/focus states and selected states. I was thinking they should use ARIA to indicate the selected state for both the main menu items and the submenu items – does that make sense or should there be only one selected item indicated?

We found this info on the W3C wiki:

The disclaimer at the top of the page gave us pause, which is also why I'm writing to the list.

We looked at the examples the page linked to at:

I noticed when just using the keyboard in both of these examples that much of the functionality is identical. What's different:

1. http://oaa-accessibility.org/example/25/ displays the submenu as I arrow left/right.
2. http://oaa-accessibility.org/example/26/ I need to hit "enter" or the down arrow for any submenu to display even as I arrow left/right.

Is there a preferred or more common method between the two?

The submenu that the developers are working contains a brief list in a horizontal layout just below the main menubar. Otherwise, it seems to function the same as the examples.


Judith Blankman

Accessibility Strategist
Customer Experience (CX)
WFVC Digital | 1 Front Street | San Francisco, CA 94111
Tel: 415-947-6583 | Cell: 415-601-1114

MAC: A0195-171