WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: ARIA for main navigation bar

for

From: Bryan Garaventa
Date: Apr 23, 2015 12:08PM

> 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.

Does this mean that after you arrow into the submenu, you need to press Left/Right to navigate the submenu?

If the menu trigger includes a visual indication such as a downward pointing triangle or the like, then it's up to you whether the submenu visually opens on focus. Either way though, the triggering role=menuitem element must include aria-haspopup="true" to indicate that there is an attached submenu for non-sighted screen reader users.

Also, if pressing Enter on the triggering menuitem A+href=url tag will navigate to another page, it is necessary to surround the container element of the menubar construct with role=application, otherwise when you press Enter on the menu while navigating in Virtual Cursor or Browse mode using JAWS or NVDA, it will open the new page instead of entering Applications mode for interacting with the menus. After Application mode is invoked, pressing Enter again at this point will activate the onclick on the A tag, or pressing Down will navigate into the submenu.

If this dual functionality is the case, then I recommend adding an aria-describedby on each of the A tag role=menuitem elements to reference a hidden element for indicating the correct keystroke to use for doing one or the other action, since it won't be clear that pressing Enter again at this point will open a different browser page.

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of <EMAIL REMOVED>
Sent: Wednesday, April 22, 2015 7:09 PM
To: <EMAIL REMOVED>
Subject: [WebAIM] ARIA for main navigation bar

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> >