WebAIM - Web Accessibility In Mind

E-mail List Archives

ARIA for main navigation bar

for

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:
http://www.w3.org/WAI/GL/wiki/Using_ARIA_menus

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:
http://oaa-accessibility.org/examples/role/86/

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.


Thanks,


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


j<mailto: <EMAIL REMOVED> > <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >